美文网首页
Flutter工程和路由

Flutter工程和路由

作者: spades_K | 来源:发表于2020-01-14 16:33 被阅读0次
    // 引入组件UI库
    import 'package:flutter/material.dart';
    // 程序主入口 单行函数的 简写方法
    void main() => runApp(MyApp());
    
    // 也可写成
    /*
    void main()
    {
      return runApp(MyApp());
    }
    * */
    // mynApp是Flutter的根组件,runApp函数传入widget参数启动app
    
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      // widget组件的build方法用来描述构建UI界面(组合 拼装)
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // 主题蓝色
            primarySwatch: Colors.blue,
          ),
          // 首页路由
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    // ㊙️㊙️㊙️㊙️㊙️㊙️创建新router 用于跳转、传值、回传
    class NewRouter extends StatelessWidget {
    
      NewRouter({
        Key key,
        @required this.text, // 接受一个text参数
      }) : super(key:key);
    
      final String text;
    
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text('new router')
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("this is new rooter 传过来的值是 $text"),
                RaisedButton(
                  onPressed: () => Navigator.pop(context,"我是返回值"),
                  child: Text("点击我返回"),
                )
              ],
            )
    
          ),
        );
        }
      }
    
    // StatefulWidget 有状态的组件  StatelessWidget 无状态的组件
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      // state类
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 100;
      // 声明方法
      void _incrementCounter() {
        // 有状态变化 通知Flutter框架后 调用buil进行页面变化  可以重新构建任何需要更新的东西,无需分别修改各个widget
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        // Scaffold 页面脚手架库,提供了默认的导航栏,标题和主屏幕widget树,默认路由创建。
        return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
          ),
          // Center可将其子组件树对其到屏幕中心。
          body: Center(
            // Column 将所有组件沿屏幕垂直方向依次排列。
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '中间行,还是最居中的!!'
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                FlatButton (
                  child: Text("点击跳转"),
                  textColor: Colors.red,
                  onPressed: () async {
                     var result = await Navigator.push(context,MaterialPageRoute(builder: (context){
                      return NewRouter( text: "--> 我是传入的参数!!!",);
                    }));
                    /*
                    *  MaterialPageRoute({
                       WidgetBuilder builder, // 实现这个回调返回路由实例即可
                       RouteSettings settings, // 包含路由配置信息。
                       bool maintainState = true, //入栈时候是保存其内存。
                       bool fullscreenDialog = false, // 是否模态 默认是入栈方式
                    *
                    *
                    * */
                    print("回传的值是--> $result");
                  },
                )
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:Flutter工程和路由

          本文链接:https://www.haomeiwen.com/subject/dayoactx.html