flutter 官網(wǎng)
1:StatelessWidget和StatefulWidget
不可變和可變修飾昂灵。
2:Row橫排布局，Column豎排布局 Stack疊在一起丁恭。
Expanded填充布局（靈活布局），當(dāng)是Row橫向均分，設(shè)置寬度沒(méi)有意義涂屁。當(dāng)Column縱向均分設(shè)置高度沒(méi)有意義。

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0.0,0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//間距位置對(duì)齊方式
        crossAxisAlignment: CrossAxisAlignment.baseline,//文字底部對(duì)齊
        textBaseline: TextBaseline.alphabetic,//以上一起做
        children: <Widget>[
          Expanded(
              child:Container(
                child: Text(
                  '你好',
                  style: TextStyle(fontSize: 30),
                ),
//            child: Icon(
//                Icons.add,
//                size: 20,
//                color: Colors.yellow,//里面顏色
//            ),
                color: Colors.red,//外框顏色
                height: 40,
              ),
          ),
          Expanded(
            child:Container(
              child: Text('我是黃秀',
                style: TextStyle(fontSize: 30),
              ),
//            child: Icon(
//              Icons.ac_unit,
//              size: 40,
//              color: Colors.yellow,//里面顏色
//            ),
              color: Colors.pink,//外框顏色
              height: 60,
            ),
          ),
          Expanded(
            child:Container(
    child: Text('報(bào)你',
      style: TextStyle(fontSize: 40),
    ),
//            child: Icon(
//              Icons.favorite,
//              size: 60,
//              color: Colors.yellow,//里面顏色
//            ),
    color: Colors.blue,//外框顏色
    height: 80,
  ),
          ),
//          Icon(Icons.ac_unit,size: 90,),
//          Icon(Icons.access_alarm,size: 120,),
        ],
      ),
    );
  }
}

3:文字對(duì)齊

  crossAxisAlignment: CrossAxisAlignment.baseline,//文字底部對(duì)齊
   textBaseline: TextBaseline.alphabetic,//以上一起做

這兩個(gè)一起寫(xiě)對(duì)文字對(duì)齊起作用灰伟。
4:Positioned

Positioned(
        top: 30,
        left: 10,
        child: Container(
            color: Colors.blue,
            width: 50,
            height: 50,
          ),
     ),

設(shè)置模塊的位置拆又。

5:等比例部件AspectRatio

class Aspect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      alignment: Alignment(0.0,0.0),
      child: Container(
        color: Colors.blue,
        width: 100,
        child: AspectRatio(
          aspectRatio: 2/1,
          child: Icon(Icons.add),
        ),

      ),
    );
  }
}

6:BottomNavigationBar底部導(dǎo)航

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar:BottomNavigationBar(
          type: BottomNavigationBarType.fixed,//設(shè)置bar樣式
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              title: Text('微信'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.bookmark),
              title: Text('通訊錄'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.history),
              title: Text('發(fā)現(xiàn)'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              title: Text('我'),
            ),

          ],
        ) ,
      ),
    );
  }
}

7：點(diǎn)擊事件

  onTap: (int index){
          _currentIndex = index;
        },

8:刷新界面

  setState(() {});