学习Flutter 控件笔记

一、滑动控件

GridView控件需要注意gridDelegate参数类型是SliverGridDelegate，它是的作用是控制GridView子组件如何排列。

SliverGridDelegateWithFixedCrossAxisCount 需要注意两个参数crossAxisCount&& childAspectRatio

crossAxisCount：横轴元素的数量，此属性确定后子元素在横轴的长度等于屏幕长度除以crossAxisCount的商

childAspectRatio：子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后子函数横轴长度确定后，通过参数就可以确定子元素在主轴的长度。

SliverGridDelegateWithMaxCrossAxisExtent：该类实现了一个横轴子元素为固定最大长度的layout算法。

maxCrossAxisExtent：子元素在横轴上的最大长度，横轴方向的每个子元素长度仍然是等分的。

二、Container

height: 容器高度；width：容器宽度；padding: 容器内补白；margin：容器外补白；child:容器内子控件。

三、Scaffold

Scaffold是一个路由页的骨架，就是可以容纳导航栏，抽屉菜单，底部Tab导航栏等。

AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题，导航栏菜单，导航栏底部Tab标题等

 child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text(
                '首页',
                style: TextStyle(color: Colors.white),
              ),
              automaticallyImplyLeading: false,
            ),

导航栏阴影为0，标题首页，颜色白色，不实现自动默认leading按钮

bottomNavigationBar 设置底部导航 底部三个导航栏，导航栏设置icon title，设置当前索引值，点击触发方法。

 bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              title: Text('1'),
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.folder_open),
              title: Text('2'),
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.person),
              title: Text('3'),
            ),
          ],
          currentIndex: currentIndex,
          onTap: (int index) {
            if (index == 2) {
            }
            setState(() {
              currentIndex = index;
            });
          },
        ),