flutter 程序入口,及BottomNavigationBa

最近继续学了点flutter, 想要记录 又不知道从哪里开始,思来想去 还是按照我iOS开发的习惯, 从一个App的程序入口说起吧
先简单了解两个概念

MaterialApp

MaterialApp 它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用。我们可以粗略的把它理解为UIWidow
常用属性: home(主页) title(标题) color(颜色) theme(主题) routes(路由)

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、
snackbar 和底部 sheet 的 API。(其实我也不懂啥意思, 这里先简单的理解为 UITabbarController)
常用属性:
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件。

但要明确一点, MaterialApp, Scaffold都是widge

最后说下我的目的,先能用 flutter去写一个app,熟悉下,然后再去深入研究flutter的各种高级的东西

程序入口就是main函数这个不必多说

一番研究之后, main函数里要是这样子
home: Tabs() 实际上就是 设置了rootViewController

void main () {  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }
}

在Tabs里面就要设置Scaffold(UITabbarController)了

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

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

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
// 可以理解为视图
  List _pageList=[
    HomePage(),
    SettingPage(),
    CategoryPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('flutter Demo',),
        ),
        body:this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
         // 点击效果
          onTap: (int index){
            setState(() {
              this._currentIndex = index;
            });
            print(index);
          },
          //  相当于设置tabbaritem
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页'),

            ),

            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text('分类'),
            ),

            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置'),
            ),
          ],
        ),
      );
  }
}

上述代码都有注释,不难理解 这里需要解释一下
在 Flutter 里自定义组件就是一个类，需要继承 StatelessWidget或者StatefulWidget

StatelessWidget 是无状态组件，状态不可变的 widget

StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

从iOS的角度来讲, 如果这个视图在初始化结束后, 或发生 UI绘制的操作就要用StatefulWidget(个人理解)

个人心得:照目前看来 Flutter开发时 语法可以无限往下嵌套, 这样会降低代码的可读性和可维护性, 所以一定要进行文件的抽离, 做好文件夹目录的相关工作