Question

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

例如，如果用户点击“杠铃行”卡（请参见下面的图像链接），则输入屏幕的appBar标题将变为“杠铃行”。

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

Previous Card screen

Single Card Input Screen

谢谢

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

输出：

我希望这会有所帮助。

Answer 2

这是传递数据的好方法

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

创建一个接受String的导航方法是一种好习惯，因为您会多次这样做。

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

2 个答案: