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 導(dǎo)航欄可切換控件 以及BottomNavigationBar 底部導(dǎo)航欄菜單 底部導(dǎo)航欄通常與Scaffold結(jié)合使用

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),
];