框架

应用

创建一个 MaterialApp 应用程序, 常用的属性有:

  • debugShowCheckedModeBanner: false 是否显示 Debug 字样, 默认 true
  • theme: ThemeData.dark() 应用程序主题
  • title: title 应用程序标题
  • home: Scaffold(...) 应用程序首页, 通常使用 Scaffold 脚手架搭建

主题

ThemeData 用于定义主题样式(背景颜色、字体大小、字体颜色等)

MaterialApp(
  ...
  theme: new ThemeData(
    primaryColor: Color(0xff1ABC9C),
    appBarTheme: AppBarTheme(
      color: Color(0xff1ABC9C),
      actionsIconTheme: IconThemeData(
        color: Colors.white
      ),
      iconTheme: IconThemeData(
        color: Colors.white
      ),
      textTheme: TextTheme(
        title: TextStyle(
          color: Colors.white,
          fontSize: 20
        )
      )
    ),
  ),
);

也可使用内置主题:

theme: ThemeData.dark()

页面骨架

一个完整的数路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。如果每个路由页面都需要开发者自己手动去实现这些,这会是一件非常麻烦且无聊的事。幸运的是,Flutter Material Scaffold 是一个路由页的骨架,我们使用它可以很容易地拼装出一个完整的页面。

常用的属性有:

  • appBar: AppBar() 导航栏
  • body: Widget... 主要内容
  • drawer: Drawer() 抽屉
  • floatingActionButton: FloatingActionButton() 悬浮按钮
  • bottomNavigationBar: BottomAppBar() 底部导航栏

导航栏

AppBar: 定义导航栏

AppBar 的定义:

AppBar({
  Key key,
  this.leading, // 导航栏左侧Widget
  this.actions, // 导航栏右侧Widget
  this.title,// 页面标题
  this.bottom, // 导航栏底部菜单,通常为Tab按钮组
  this.elevation = 4.0, // 导航栏阴影
  this.centerTitle, //标题是否居中
  this.automaticallyImplyLeading = true, //如果leading为null,是否自动实现默认的leading按钮
  this.backgroundColor,
  ...   //其它属性见源码注释
})

比如:

appBar: new AppBar(
  title: new Text(title),
  leading: IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
  actions: <Widget>[ //导航栏右侧菜单
    IconButton(icon: Icon(Icons.share), onPressed: () {}),
  ],
),

悬浮按钮

FloatingActionButton 是 Material 设计规范中的一种特殊 Button,通常悬浮在页面的某一个位置作为某种常用动作的快捷入口

floatingActionButton: new FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: new Icon(Icons.add),
),
// 指定 floatingActionButton 的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

侧边抽屉

Drawer: 侧边抽屉

drawer: Drawer(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(top: 38.0),
        child: Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: ClipOval(
                child: Image.asset(
                  "assets/imgs/avatar.png",
                  width: 80,
                  height: 80,
                ),
              ),
            ),
            Text(
              "Quanzaiyu",
              style: TextStyle(fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
      Expanded(
        child: ListView(
          children: <Widget>[
            ListTile(
              leading: const Icon(Icons.add),
              title: const Text('Add account'),
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Manage accounts'),
            ),
          ],
        ),
      ),
    ],
  ),
),

底部导航栏

BottomAppBar

bottomNavigationBar: BottomAppBar(
  color: Colors.grey, // 背景色
  child: Container(
    height: 50.0,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        IconButton(
          iconSize: 24,
          icon: Icon(Icons.home, size: 36, color: Colors.blue,),
          tooltip: 'home',
          onPressed: () {},
        ),
        IconButton(
          iconSize: 24,
          icon: Icon(Icons.settings, size: 36, color: Colors.green,),
          tooltip: 'settings',
          onPressed: () {},
        )
      ],
    ),
  ),
),

BottomNavigationBar

int _selectedIndex = 0;
bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('Home'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      title: Text('Business'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('School'),
    ),
  ],
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.amber[800],
  onTap: (int index) {
    setState(() {
      _selectedIndex = index;
    });
  },
),

参考:

其他

参考

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress