美文网首页
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