Flutter知识点（一）

flutter 官网
1:StatelessWidget和StatefulWidget
不可变和可变修饰。
2:Row横排布局，Column竖排布局 Stack叠在一起。
Expanded填充布局（灵活布局），当是Row横向均分，设置宽度没有意义。当Column纵向均分设置高度没有意义。

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,//间距位置对齐方式
        crossAxisAlignment: CrossAxisAlignment.baseline,//文字底部对齐
        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('报你',
      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:文字对齐

  crossAxisAlignment: CrossAxisAlignment.baseline,//文字底部对齐
   textBaseline: TextBaseline.alphabetic,//以上一起做

这两个一起写对文字对齐起作用。
4:Positioned

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

设置模块的位置。

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底部导航

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar:BottomNavigationBar(
          type: BottomNavigationBarType.fixed,//设置bar样式
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              title: Text('微信'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.bookmark),
              title: Text('通讯录'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.history),
              title: Text('发现'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              title: Text('我'),
            ),

          ],
        ) ,
      ),
    );
  }
}

7：点击事件

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

8:刷新界面

  setState(() {});

Flutter知识点（一）

推荐阅读更多精彩内容