标签搜索

Flutter MaterialApp - Scaffold - DefaultTabController - AppBar

cicaba
2020-03-10 / 0 评论 / 2 阅读 / 正在检测是否收录...

Scaffold
AppBar
bottomNavigationBar

class App extends StatelessWidget {
  @override //重写父类
  Widget build(BuildContext context) {
    return MaterialApp( //Material风格app
      debugShowCheckedModeBanner: false, //关闭状态栏debug
      home: Home(),
      theme: ThemeData( //主题
        primaryColor: color(0x0075b8), //主题颜色
        highlightColor: color(0xffffff, a: 0.4), //高亮颜色
        splashColor: color(0xffffff, a: 0.6), //水波颜色
      ),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //TabBar和TabBarView的控制器,它是关联这两个组件的桥梁
      length: 3,
      child: Scaffold( //脚手架组件
        appBar: AppBar( //显示在界面顶部的一个AppBar
          title: Center(
            child: Text(
              "首页",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w900,
                color: color(0xffffff),
              ),
            ),
          ),
          leading: IconButton( //标题前面显示的一个组件
            icon: Icon(Icons.menu),
            tooltip: "Navigration",
            onPressed: () => debugPrint("Navigration"),
          ),
          actions: <Widget>[ //一个Widget列表一般放按钮
            IconButton(
              icon: Icon(Icons.search),
              tooltip: "search",
              onPressed: () => debugPrint("search"),
            )
          ],
          elevation: 4, //bar阴影默认4
          bottom: TabBar( //ab页的选项组件,默认为水平排列。
            unselectedLabelColor: color(0xffffff, a: 0.5),
            indicatorColor: color(0xffffff),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 2,
            tabs: <Widget>[ //Tab选项列表
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView( //ab页的内容容器,Tab页内容一般处理为随选项卡的改变而改变
          children: <Widget>[
            Icon(Icons.local_florist, size: 100, color: color(0x0075b8)),
            Icon(Icons.change_history, size: 100, color: color(0x0075b8)),
            Icon(Icons.directions_bike, size: 100, color: color(0x0075b8)),
          ],
        ),
        bottomNavigationBar: BottomBar()),
      ),
    );
  }
}
class _BottomBar extends State<BottomBar> {
  int _currentIndex = 0;
  void _bottomTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedItemColor: color(0x00000),
      unselectedItemColor: color(0x999999),
      currentIndex: _currentIndex,
      onTap: _bottomTap,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("home"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.domain),
          title: Text("domain"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.people_outline),
          title: Text("people_outline"),
        ),
      ],
    );
  }
}
Color color(int rgb, {double a = 1}) {
  if (a < 0) {
    a = 0;
  } else if (a > 1) {
    a = 1;
  }
  return Color.fromRGBO(
    (rgb & 0xFF0000) >> 16,
    (rgb & 0x00FF00) >> 8,
    (rgb & 0x0000FF) >> 0,
    a,
  );
}
0

评论 (0)

取消