【问题标题】:Creating more than one initial route创建多个初始路由
【发布时间】:2019-11-08 06:29:59
【问题描述】:

可能真的很简单,但我正在尝试在主页上创建另一个按钮以遵循另一条路线。

目前只有一个按钮可以带您进入路径 X(也称为第一个屏幕/主页),但我希望另一个按钮可以带您进入路径 Y。请问有什么建议吗?

提前干杯! (抱歉仍然掌握术语)

void main() {
  runApp(MaterialApp(
   title: 'Named Routes Demo',
initialRoute: '/',
routes: {
  '/': (context) => FirstScreen(),
 '/second': (context) => SecondScreen(),
  '/second/third': (context) => ThirdScreen(),
    },
   )
  );
 }

class FirstScreen extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
   return Scaffold(
  appBar: AppBar(
    title: Text('Home Page'),
  ),
  body: Center(
    child: RaisedButton(
      child: Text('Search'),
       onPressed: () {
           Navigator.pushNamed(context, '/second');
             },
            ),
          ),
        );
      }
    }

  class SecondScreen extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
    title: Text('Results Page'),
  ),
  body: Center(
    child: RaisedButton(
      child: Text('Click this result'),
      onPressed: () {
        Navigator.pushNamed(context, '/second/third');
      },
    ),
    ),
  );
}
}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("Items Page"),
  ),
  body: Center(
    child: RaisedButton(
          onPressed: () {
        Navigator.pop(context);
      },
      child: Text('This is the item!'),
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

    您可以使用 onGenerateRoute 参数来代替使用路由

    void main() {
      runApp(MaterialApp(
        title: 'Named Routes Demo',
          home: FirstScreen(),
          onGenerateRoute: (RouteSettings settings) {
            return MaterialPageRoute(builder: (context) {
              if(settings.name == '/second/third') return ThirdScreen();
              if(settings.name == '/second') return SecondScreen();
              else return FirstScreen();
            })
          },
        },
       )
      );
     }
    

    您可以将此逻辑更改为您需要使用 settings.name 的任何方式

    要在主页上添加另一个按钮,对于这个简单的代码,您可以使用 Column 小部件,这是示例

    Center(
      child: Column(
        children: [
          RaisedButton(
            child: Text('Button one text'),
            onPressed: () => Navigator.pushNamed(context, '/second'),
          ),
          RaisedButton(
            child: Text('Button two text'),
            onPressed: () => Navigator.pushNamed(context, '/second/third'),
          ),
        ],
      ),
    ),
    

    【讨论】:

    • 为响应欢呼,您将如何在第一个屏幕上添加另一个按钮?那是在第一个屏幕部分添加另一个凸起的按钮还是在这个无效的主要部分?欢呼
    • @h.healy 我更新了答案以解决您的问题
    猜你喜欢
    • 1970-01-01
    • 2021-01-01
    • 2021-03-02
    • 2019-12-06
    • 2012-05-14
    • 1970-01-01
    • 2019-11-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多