flutter控件之TabBar

import 'package:flutter/material.dart';
class LearnTabBar extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _LearnTabBar();
  }
}
class _LearnTabBar extends State<LearnTabBar>{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
          length: choices.length,
          child: new Scaffold(
              appBar: new AppBar(
                primary: true,
                title: new Text("title"),
                bottom: new TabBar(
                  isScrollable: true,
                  indicatorColor: Colors.yellowAccent,
                  indicatorWeight: 10.0,
                  indicatorSize: TabBarIndicatorSize.tab,
                  tabs: choices.map((Choice c){
                    return new Tab(
                      text: c.title,
                      icon: new Icon(c.icon),
                    );
                  }).toList(),
                ),
              ),
            body: new TabBarView(
                children: choices.map((Choice c){
                  return new Padding(
                      padding: EdgeInsets.all(10.0),
                      child: new Card(
                        elevation:10.0,
                        child: new Center(
                          child:new Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              new Icon(
                                c.icon,
                                size: 100.0,
                                color: Colors.blue,
                              ),
                              new Text(
                                c.title,
                                style:new TextStyle(
                                  color: Colors.blue,
                                  fontSize: 30.0
                                ) ,
                              ),
                            ],
                          ),
                        ),
                      ),
                  );
                }).toList(),
            ),
          ),
      ),
    );
  }
}

class Choice{
  const Choice({this.icon,this.title});
  final String title;
  final IconData icon;
}

const List<Choice> choices=const <Choice>[
  const Choice(title: "CAR",icon: Icons.directions_car),
  const Choice(title: "PRINT",icon: Icons.print),
  const Choice(title: "ANDROID",icon: Icons.android),
  const Choice(title: "MAP",icon: Icons.map),
  const Choice(title: "PHONE",icon: Icons.phone),
  const Choice(title: "ALARMS",icon: Icons.access_alarms),
  const Choice(title: "BLUETOOTH",icon: Icons.bluetooth),
];
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容