原创

04.Flutter之页面


目录介绍

  • 01.跳转页面无参数
  • 02.跳转页面有参数
  • 03.build方法思考
  • 04.build方法创建UI
    • 4.1 new MaterialApp
    • 4.2 new Scaffold

好消息

  • 博客笔记大汇总【16年3月到至今】,包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也在工作之余收集了大量的面试题,长期更新维护并且修正,持续完善……开源的文件是markdown格式的!同时也开源了生活博客,从12年起,积累共计N篇[近100万字,陆续搬到网上],转载请注明出处,谢谢!
  • 链接地址:https://github.com/yangchong211/YCBlogs
  • 如果觉得好,可以star一下,谢谢!当然也欢迎提出建议,万事起于忽微,量变引起质变!

01.跳转页面无参数

  • 直接跳转到该页面,不带参数
    class TestMain2 extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        return new MyTest();
      }
    }
    
    class MyTest extends State<TestMain2>{
      @override
      Widget build(BuildContext context) {
        return null;
      }
    }
    

02.跳转页面有参数

  • 直接跳转到该页面,带参数传递
    class TestMain3 extends StatefulWidget{
    
      String id;
      TestMain3(id){
        this.id = id;
      }
    
      //TestMain3({Key key, this.title}) : super(key: key);
      //final String title;
    
      @override
      State<StatefulWidget> createState() {
        return new MyTest();
      }
    }
    
    class MyTest extends State<TestMain3>{
      @override
      Widget build(BuildContext context) {
        return null;
      }
    }
    

03.build方法思考

  • 看了上面两种代码,为什么要将build方法放在State中,而不是放在StatefulWidget中?现在,我们回答之前提出的问题,为什么build()方法在State(而不是StatefulWidget)中?
  • 这主要是为了开发的灵活性。如果将build()方法在StatefulWidget中则会有两个问题:
    • 状态访问不便
      • 试想一下,如果我们的Stateful widget 有很多状态,而每次状态改变都要调用build方法,由于状态是保存在State中的,如果将build方法放在StatefulWidget中,那么构建时读取状态将会很不方便,试想一下,如果真的将build方法放在StatefulWidget中的话,由于构建用户界面过程需要依赖State,所以build方法将必须加一个State参数,大概是下面这样:
      Widget build(BuildContext context, State state){
        //state.counter
        ...
      }
      
      • 这样的话就只能将State的所有状态声明为公开的状态,这样才能在State类外部访问状态,但将状态设置为公开后,状态将不再具有私密性,这样依赖,对状态的修改将会变的不可控。将build()方法放在State中的话,构建过程则可以直接访问状态,这样会很方便。
    • 继承StatefulWidget不便
      • 例如,Flutter中有一个动画widget的基类AnimatedWidget,它继承自StatefulWidget类。AnimatedWidget中引入了一个抽象方法build(BuildContext context),继承自AnimatedWidget的动画widget都要实现这个build方法。现在设想一下,如果StatefulWidget 类中已经有了一个build方法,正如上面所述,此时build方法需要接收一个state对象,这就意味着AnimatedWidget必须将自己的State对象(记为_animatedWidgetState)提供给其子类,因为子类需要在其build方法中调用父类的build方法,代码可能如下:
      class MyAnimationWidget extends AnimatedWidget{
      @override
      Widget build(BuildContext context, State state){
            //由于子类要用到AnimatedWidget的状态对象_animatedWidgetState,
            //所以AnimatedWidget必须通过某种方式将其状态对象_animatedWidgetState
            //暴露给其子类   
            super.build(context, _animatedWidgetState)
          }
      }
      
      • 这样很显然是不合理的,因为
        • AnimatedWidget的状态对象是AnimatedWidget内部实现细节,不应该暴露给外部。
        • 如果要将父类状态暴露给子类,那么必须得有一种传递机制,而做这一套传递机制是无意义的,因为父子类之间状态的传递和子类本身逻辑是无关的。
  • 综上所述,可以发现,对于StatefulWidget,将build方法放在State中,可以给开发带来很大的灵活性。

04.build方法创建UI

4.1 new MaterialApp

  • MaterialApp 是Material库中提供的Flutter APP框架,通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个widget。
  • 如下所示
    class MyTest extends State<TestMain2>{
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: "逗比这个是页面",
          color: Colors.amberAccent,
          theme: ThemeData(accentColor: Colors.black, primaryColor: const Color(0xFFDE4435)),
          home: Scaffold(
            appBar: new AppBar(
              title: new Text("Appbar"),
            ),
            body: new Center(
              child: new Text("这个是居中显示"),
            ),
          ),
        );
      }
    }
    

4.2 new Scaffold

  • Scaffold 是 Material库中提供的一个widget,它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。
  • 如下所示
    class MyTest extends State<TestMain3>{
      @override
      Widget build(BuildContext context) {
        Widget icon = initImage();
        Widget about = initAboutWidget();
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('关于'),
          ),
          body: new ListView(
            padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
            children: <Widget>[
              icon,
              about,
              new ListTile(
                  title: const Text('直接微信搜索‘鸿洋’关注即可'),
                  subtitle: const Text('一个长期分享Android相关的技术干货,质量也很高,值得程序员每天看看'),
                  trailing:  Icon(Icons.arrow_forward, color: YcColors.colorPrimary),
                  onTap: () {
    
                  }),
            ],
          ),
        );
      }
    
      Widget initImage() {
        Widget icon = new Image.asset(
          'lib/image/zhy.jpg',
          width: 150.0,
          height: 150.0,
        );
        return icon;
      }
    
      Widget initAboutWidget() {
        Widget layout = new ListTile(
            title: const Text('关于项目'),
            subtitle: const Text('在学习Flutter的时候写的练手项目,用的是鸿洋大神的开发接口,模仿WanAndroid客户端,实现了其大部分的功能效果,后期慢慢完善'),
            trailing:  Icon(Icons.arrow_forward, color: YcColors.colorPrimary),
            onTap: () {
    
            });
        return layout;
      }
    }
    

其他介绍

01.关于博客汇总链接

02.关于我的博客

  • github:https://github.com/yangchong211
  • 知乎:https://www.zhihu.com/people/yczbj/activities
  • 简书:http://www.jianshu.com/u/b7b2c6ed9284
  • csdn:http://my.csdn.net/m0_37700275
  • 喜马拉雅听书:http://www.ximalaya.com/zhubo/71989305/
  • 开源中国:https://my.oschina.net/zbj1618/blog
  • 泡在网上的日子:http://www.jcodecraeer.com/member/content_list.php?channelid=1
  • 邮箱:yangchong211@163.com
  • 阿里云博客:https://yq.aliyun.com/users/article?spm=5176.100- 239.headeruserinfo.3.dT4bcV
  • segmentfault头条:https://segmentfault.com/u/xiangjianyu/articles
  • 掘金:https://juejin.im/user/5939433efe88c2006afa0c6e

评论

留言