Flutter学习(一)

1.在水平布局时,如果右半部分布局需要填充满剩余空间, 使用Expanded
//在Expanded 中使用Column可以使右边布局从顶部开始排练,否则控件会从中间显示

Widget buildRightUi() {
    return new Expanded(
      child: new Column(
        children: <Widget>[
          new Image.asset(
            "images/bg.jpeg",
          ),
        ],
      ),
    );
  }

2.AppBar
actions可以添加控件
PopupMenuButton 菜单栏

 new PopupMenuButton<Choice>(onSelected: _choose,itemBuilder: (BuildContext context){
            return choices.skip(2).map((Choice choice){
              return new PopupMenuItem<Choice>(child: Text(choice.title),value: choice,);
            }).toList();
          })

3.TabBar 导航栏可切换控件 以及BottomNavigationBar 底部导航栏菜单 底部导航栏通常与Scaffold结合使用

class TabBarPage extends StatefulWidget {
  TabBarPageState createState() => TabBarPageState();
}

class TabBarPageState extends State<TabBarPage>{
  int curIndex = 1;

  void _setChooseItem(int index){
    setState(() {
      curIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new DefaultTabController(
        length: choices.length,
        child: new Scaffold(
          appBar: new AppBar(
            title: Text("tabViewPage"),
            bottom: new TabBar(
                isScrollable: true,//可滑动在Tab过多时,可以滑动保证文字全部显示完全
                tabs: choices.map((Choice choice) {
                  return new Tab(
                    text: choice.title,
                    icon: new Icon(choice.icon),
                  );
                }).toList()),
          ),
          body: new TabBarView(
              children: choices.map((Choice choice) {
                return new Card(
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(choice.title,style: new TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),
                        new Container(
                          margin: EdgeInsets.only(top: 10),
                          child: new Icon(choice.icon,size: 80,),
                        )
                      ],
                    ));
              }).toList()),
          bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(title: Text("home"),icon: Icon(Icons.home)),
            BottomNavigationBarItem(title: Text("business"),icon: Icon(Icons.business)),
            BottomNavigationBarItem(title: Text("school"),icon: Icon(Icons.school)),
          ],fixedColor: Colors.deepPurple,currentIndex: curIndex,onTap: _setChooseItem,),
        ));
  }
}
class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];