美文网首页Flutter
4、MaterialApp和Scaffold

4、MaterialApp和Scaffold

作者: 彡廿 | 来源:发表于2018-08-17 10:23 被阅读891次

    MaterialApp和Scaffold是Flutter提供的两个Widget,其中:

    • MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget。(参考)
    • Scaffold组件是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。(参考)

    代码:

      @override
      Widget build(BuildContext context) {
        initData();
        return new MaterialApp(
          theme: new ThemeData(
            // 设置主题颜色
            primaryColor: const Color(0xFF63CA6C)
          ),
          home: new Scaffold(
            // 设置App顶部的AppBar
            appBar: new AppBar(
              // AppBar的标题
              title: new Text(appBarTitles[_tabIndex], 
              // 标题文本的颜色
              style: new TextStyle(color: Colors.white)),
              // AppBar上的图标的颜色
              iconTheme: new IconThemeData(color: Colors.white)
            ),
            body: _body,
            // 页面底部的导航栏
            bottomNavigationBar: new CupertinoTabBar(
              items: <BottomNavigationBarItem>[
                new BottomNavigationBarItem(
                    icon: getTabIcon(0),
                    title: getTabTitle(0)),
                new BottomNavigationBarItem(
                    icon: getTabIcon(1),
                    title: getTabTitle(1)),
                new BottomNavigationBarItem(
                    icon: getTabIcon(2),
                    title: getTabTitle(2)),
                new BottomNavigationBarItem(
                    icon: getTabIcon(3),
                    title: getTabTitle(3)),
              ],
              currentIndex: _tabIndex,
              // 底部Tab的点击事件处理
              onTap: (index) {
                setState((){
                  _tabIndex = index;
                });
              },
            ),
            // 侧滑菜单,这里的MyDrawer是自定义的Widget
            drawer: new MyDrawer(),
          ),
        );
      }
    

    相关文章

      网友评论

        本文标题:4、MaterialApp和Scaffold

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