Flutter(三) Demo编写

编写第一个APP

在编写APP之前，dart语法不多说，框架层要做到 了解init等生命周期，状态基，类是怎么创建的，类和界面什么关系，文件和类什么关系

直接了解概念也许不好理解，就从实践开始入手。

main()函数是整个flutter界面的入口，从main()函数开始实现如下界面
传送门https://github.com/OpenFlutter/Flutter-Notebook
里面有很多demo

image.png

这是一个首页
先不管首页有什么，我们如果想在主页画上去点什么，就要有个思路

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {}

这两句话系统以及帮我们创建好了，先不用管MyApp继承自什么，@override这是表示下面跟着的方法是重写方法
重写 Widget build(BuildContext context) {}是为了让我们自定义界面

内容很简单

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      home: BottomNavigationWidget(),
    );
  }
}

return内属性可以看字面意思，这里home对应的BottomNavigationWidget()就是我们要在首页里绘制什么东西
也可以写成 home:new BottomNavigationWidget(),

其实title也可以去掉
所以首页需要的最重要的元素就是 home 对应的 widget

这里可以很容易联想结论 在flutter里，一切皆widget

这里画了一个简易层级结构

image.png

所有的白色区域都是一块widget 包括main()函数内也是一个StatefulWidget

MaterialApp():开启一个app布局 元素包含 home，title，theme等系统属性
Scaffold():有状态的布局，类似于一个控制器，属性包含appBar,bottomNavigationBar 等等全局级别
Container():无状态布局，类似于一个界面，属性包含 margin，padding，width，height等布局级别

复杂容器
GridView() 网格布局
ListView() 列表
Stack() 堆叠式，如两个视图的重叠
SliverList() 流式 常用于首页等复合型界面 可添加多个子控件，以线性下拉

简易容器
Text() 文字 与iOS中UILabel的区别是不支持自定义位置，如果需要自定义位置，外界可以用Container ()包装，如Container (child:Text('123'))

InkWell() 水波纹效果 用于按钮点击

return Container(
    alignment: Alignment.center,
    child: new InkWell(//水波纹
      onTap:(){
        menuTap(index);
      },
  )
)