简单接触flutter的绘制页面的日记。

Tabbar

Flutter中并没有类似于Tabbarcontroller的概念，但是能够通过在Scaffold 中生成bottomNavigationBar形成对应的样式，通过tap绑定点击事件,根据当前的index改变state中的值，再通过这个值去更新body中的组件即可。

bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            selectedFontSize: selectedFontSize,
            unselectedFontSize: unselectedFontSize,
            selectedItemColor: selectedColor,
            unselectedItemColor: unselectedColor,
            currentIndex: _currentIndex,
            onTap: (int index) {
                    _switchCurrentIndex(index);
                  },
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.my_location),
                title: Text('My'),
              ),
            ],
          ),

Navbar

在很多时候需要自定义导航栏的属性。

希望导航栏更加自然，与body的颜色统一，不会有间隔显示。

将AppBar中的elevation属性设置为0.

通过AppBar中的brightness属性可以控制statu bar的模式（黑或者白）。
有可能不需要使用navbar，在不使用Appbar的情况下，在iPhone X等机型中，会导致显示上的错误，所以需要对safearea有个限定，正好flutter提供了这个组件-SafeArea，在使用时直接将body中的组件包起来即可。

列表

ListView

这是一个简单的列表的实现：

ListView(
      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
      children: <Widget>[
        MyHeaderCard(name: name,),
        MyHeaderCard(name: “”,),
        MyHeaderCard(name: "",),
        MyHeaderCard(name: "",),
      ],

ListView与TableView很类似，布局都是一行一行，但是有个很大的区别，tableview中，会有didselect的代理去处理点击事件，但是ListView中，只能对item再进行一次封装，比如GestureDetector，再将点击事件传入才能有反应。

ListView有两种初始化方式，第一种就是静态初始化，直接将所有控件传入，但这样不能填充大量数据，大量控件的初始化会导致性能问题。

另一种是通过ListView的builder：

ListView.builder(
    itemCount: 100,
    itemExtent: 50.0, //强制高度为50.0
    itemBuilder: (BuildContext context, int index) {
      return ListTile(title: Text(“$index”));
    }
);

通过index自己生成组件。

CustomScrollView

复杂的布局中可能会同时又listview与gridview，如果需要将他们链接起来，就只能用CustomScrollView，已经Sliver控件。

CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: new SliverGrid( //Grid
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: new SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建子widget      
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 20,
        
              ),
            ),
          ),
          //List
          new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建列表项      
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: new Text('list item $index'),
                  );
                },
                childCount: 50 //50个列表项
            ),
          ),
        ],
      ),

github: github.com/ZhangHeYue/…

Flutter 简单探索

Tabbar

Navbar

列表

ListView

CustomScrollView