翩翩。从上一屏幕上的特定卡片导航时,动态更改AppBar标题。

问题描述 投票:0回答:1

我是Flutter的新手,试图根据上一个屏幕上被点击的卡片练习名称动态改变输入屏幕的appBar标题。

例如,如果用户点击Barbell Row卡(见下面的图片链接)--输入屏幕appBar标题将变成Barbell Row。

怎样才能实现这个功能呢?

上一个卡片屏幕

单卡输入屏幕

谢谢你

flutter dart flutter-layout
1个回答
0
投票

这是一个很好的传递数据的方法

class PreviousScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              navigate(context, "Hello");
            },
            child: Text("Hello"),
          ),
          RaisedButton(
            onPressed: () {
              navigate(context, "Bar Bell");
            },
            child: Text("Bar bell"),
          )
        ],
      ),
    );
  }

  void navigate(BuildContext context, String text){
    Navigator.push(context, MaterialPageRoute(builder: (context) => SignleCardInputScreen(text: text,)));
  }

}

class SignleCardInputScreen extends StatelessWidget {

final String text;

  const SignleCardInputScreen({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(text),
      ),
    );
  }
}

最好的做法是创建一个能接受字符串的navigate方法,因为你会不止一次地这样做。


1
投票

试试下面的代码。它工作得非常好。

第一个屏幕

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'First Screen'
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => SecondScreen('Babel Row'),
                  ),
                );
              },
              child: Card(
                child: Container(
                  height: 100,
                  width: MediaQuery.of(context).size.width,
                  child: Center(child: Text('Babel Row')),
                ),
              ),
            ),
            SizedBox(height: 20,),
            GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => SecondScreen('Bench Press'),
                  ),
                );
              },
              child: Card(
                child: Container(
                  height: 100,
                  width: MediaQuery.of(context).size.width,
                  child: Center(child: Text('Bench Press')),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

第二屏幕

class SecondScreen extends StatelessWidget {
  // define a string variable
  final String name;

  // create a constructor
  const SecondScreen(this.name);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // set the app bar title here
        title: Text(name),
      ),
      body: Center(
        child: Text(
          name,
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
}

输出。

enter image description here

enter image description here

enter image description here


希望能帮到你

© www.soinside.com 2019 - 2024. All rights reserved.