Flutter -- 4.项目主要组织架构分析

1.MaterialApp

• 相当于iOS的keyWindow
• title，标题。目前暂时没有看到有什么实质性的用处
• home，当于window的rootViewController
• theme，一般使用ThemeData
  • primarySwatch，主要材质颜色，可以影响导航颜色。某些材质组件可能会使用不同的primaryColor阴影来处理阴影,边框等...
  • splashColor，点击BottomNavigationBarItem后弹起时的颜色
  • highlightColor，点击BottomNavigationBarItem时高亮的颜色

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldBar(),
      theme: ThemeData(
          primarySwatch: Colors.grey, //可以影响导航颜色
          splashColor: Color.fromARGB(0, 0, 0, 0), //切换BarItem时，弹开时的颜色
          highlightColor: Color.fromARGB(0, 0, 0, 0) //切换BarItem时，按下时的颜色
      ),
    );
  }
}

2.Scaffold

• 一个系统封装好的Widget，里面带有导航栏样式
• appBar，导航栏封装的Widget
• body, 类似于iOS中的ViewController中的view，中间区域
• centerTitle，为了兼容Android。查看后台程序任务时，显示的文字
• floatingActionButton，FlutterDemo中的悬浮按钮
• bottomNavigationBar， 底部Bar。BottomNavigationBar
  • selectedFontSize，表示选中时，字体大小。默认14，因为默认状态为12，一般情况会改为12
  • currentIndex，表示当前选中的item
  • type，当items个数大于3时，此时item的颜色会被置为白色。如果需要正常的话，需要将type置为BottomNavigationBarType.fixed
  • fixColor，表示item选中时的颜色
  • items， [BottomNavigationbarItem]
    • BottomNavigationBarItem
      • Icon，normal状态下图标
      • activteIcon，select状态下图标
      • label，标题
• 下面实现点击BottomNavigationBarItem，切换item功能

class ScaffoldBar extends StatefulWidget {

  @override
  _ScaffoldBarState createState() => _ScaffoldBarState();
}

class _ScaffoldBarState extends State<ScaffoldBar> {

  int _currentIndex = 0;

  List<Widget> _bodys = [
    ChatPage(),
    FriendsPage(),
    DiscoverPage(),
    MinePage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _bodys[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.green,
        currentIndex: _currentIndex,
        selectedFontSize: 12,
        items: [
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_chat.png', width: 20,height: 20,),
              activeIcon: Image(image: AssetImage('images/tabbar_chat_hl.png'), width: 20,height: 20,),
              label: '微信'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_friends.png', width: 20,height: 20,),
              activeIcon: Image(image: AssetImage('images/tabbar_friends_hl.png'), width: 20,height: 20,),
              label: '通讯录'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_discover.png', width: 20,height: 20,),
              activeIcon: Image(image: AssetImage('images/tabbar_discover_hl.png'), width: 20,height: 20,),
              label: '发现'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_mine.png', width: 20,height: 20,),
              activeIcon: Image(image: AssetImage('images/tabbar_mine_hl.png'), width: 20,height: 20,),
              label: '我'
          ),
        ],
        onTap: (int index){
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

3.AppBar

• 导航栏
• title，标题
• elevation，导航栏下方黑线的高度
• centerTitle，为了兼容Android。查看后台程序任务时，显示的文字
• actions，Widget数组。这里通过手势GestureDetector为一个Widget添加一个点击事件

AppBar(
        title: Text('Hello Flutter'),
        backgroundColor: ThemeColor,
        actions: [
          GestureDetector(
            child: Container(
              child: Image.asset('images/image.png', width: 20, height: 20,),
              margin: EdgeInsets.only(right: 10),
            ),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => DiscoverDetailPage(title: '通讯录搜索')));
            },
          )
        ],
      )

• 页面Push
  • 使用Navigator进行push操作
  • route使用MaterialPageRoute创建

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => DiscoverDetailPage(title: '通讯录搜索')))