Flutter：从上一个屏幕上的特定卡片导航时动态更改 AppBar 标题答案

【问题标题】：Flutter: Changing AppBar title dynamically when navigating from specific card on previous screenFlutter：从上一个屏幕上的特定卡片导航时动态更改 AppBar 标题
【发布时间】：2020-08-20 17:09:46
【问题描述】：

我是 Flutter 的新手，正在尝试根据在前一屏幕上点击的卡片练习名称动态更改输入屏幕的 appBar 标题。

例如，如果用户点击 Barbell Row 卡片（请参阅下面的图片链接） - 输入屏幕 appBar 的标题将变为 Barbell Row。

实现这一目标的最佳方法是什么？

Previous Card screen

Single Card Input Screen

谢谢

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

这是传递数据的好方法

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),
      ),
    );
  }
}

最好创建一个接受字符串的导航方法，因为您将多次这样做。

【讨论】：

【解决方案2】：

试试下面的代码。效果很好。

首屏

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,
          ),
        ),
      ),
    );
  }
}

输出：

我希望这会有所帮助。

【讨论】：