Flutter六：Material Design风格Widget

提纲

1.MaterialApp
2.scaffold
3.AppBar
4.TabBar
4.BottomNavigationBar
5.Drawer
6.FloatingActionButton
7.FlatButton
8.PopupMenuButton
9.SimpleDialog
10.AlertDialog
11.SnackBar
12.TextField
13.Card

一、 MaterialApp（应用组件）

MaterialApp代表使用质感设置风格的应用，一个完整的Flutter项目就是从MaterialApp开始的。

属性名称	说明	类型
home	主页	Widget
routes	路由	Map<String, WidgetBuilder>
initialRoute	初始路由	String
onGenerateRoute	生成路由	RouteFactory
onUnknownRoute	未知路由	RouteFactory
navigatorObservers	导航观察器	List
builder	建造者	TransitionBuilder
title	标题	String
onGenerateTitle	生成标题	GenerateAppTitle
color	颜色	Color
theme	主题	ThemeData
locale	地点	Locale
localizationsDelegates	本地化委托	Iterable<LocalizationsDelegate>
localeResolutionCallback	区域分辨回调	LocaleResolutionCallback
supportedLocales	支持区域	Iterable
debugShowMaterialGrid	调试显示材质网格	bool
showPerformanceOverlay	显示性能叠加	bool
checkerboardRasterCacheImages	棋盘格光栅缓存图像	bool
checkerboardOffscreenLayers	棋盘格层	bool
showSemanticsDebugger	显示语义调试器	bool
debugShowCheckedModeBanner	调试显示检查模式横幅	bool
navigatorKey	导航键	GlobalKey

二、 scaffold（脚手架组件） [ˈskæfəʊld]

属性名称	说明	类型
appBar	AppBar	显示在界面顶部的一个 AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在 Material 中定义的一个功能按钮
persistentFooterButtons	List<Widget>	固定在下方显示的按钮
drawer	Widget	侧边栏控件
bottomNavigationBar	Widget	显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作底部菜单导航
backgroundColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容 body是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      drawer: Drawer(
        child: DrawaerScreen(),
        elevation: 2.0,
      ),
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
      ...
      ),
    );
  }

三、AppBar（应用按钮组件）

AppBar是一个顶端栏，对应着 Android 的 Toolbar。

image.png

属性名称	类型	说明
leading	Widget	在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。
title	Widget	Toolbar 中主要内容，通常显示为当前界面的标题文字。
actions	List	一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单。
bottom	PreferredSizeWidget	一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。
elevation	double	控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值。
flexibleSpace	Widget	一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。
backgroundColor	Color	Appbar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。
brightness	Brightness	Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。
iconTheme	IconThemeData	Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
textTheme	TextTheme	Appbar 上的文字样式。
centerTitle	bool	标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
toolbarOpacity	double

appBar: AppBar(
        title: Text('首页'),
//        leading: Icon(Icons.android),
        backgroundColor: Colors.red,
        centerTitle: true,
        // 非隐藏的菜单
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.share),
              tooltip: 'Add Alarm',
              onPressed: () {}
          ),
          // 隐藏的菜单
          new PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              new PopupMenuItem(
                  value:"选项一的内容",
                  child: new Text("选项一")
              ),
              new PopupMenuItem(
                  value: "选项二的内容",
                  child: new Text("选项二")
              )
            ],
            onSelected: (String action) {
              // 点击选项的时候
              switch (action) {
                case 'A': break;
                case 'B': break;
                case 'C': break;
              }
            },
          ),
        ],
      ),

TabBar

1. 属性：

属性名称	说明
controller	控制器
isScrollable = false	是否可以滑动
indicatorColor	指示器的颜色
indicatorWeight	指示器高度
indicatorPadding	EdgeInsets.zero,
indicator	自定义指示器
indicatorSize
labelColor	选中文字颜色
labelStyle
labelPadding	文字的内边距
unselectedLabelColor	未选中文字颜色
unselectedLabelStyle
dragStartBehavior	DragStartBehavior.start,
onTap	点击事件

2. 案例：实现tab切换功能

定义一个tab的集合tabs，类型为Tab,可以定义文本或者图标

 List<Tab> tabs = [
    Tab(text: "常规", icon: Icon(Icons.favorite)),
    Tab(text: "质感", icon: Icon(Icons.airline_seat_recline_normal)),
    Tab(text: "动画", icon: Icon(Icons.devices          )),
  ];

定义TabController，必须加with TickerProviderStateMixin，否则报错，具体原理未知

//TabController必须放置build里边，否则会报错
TabController controller = TabController(length: tabs.length, vsync: this);

3.定义一个column：
①TabBar：controller、tabs、isScrollable: true，如果为true表示可以滑动，没有沾满全部，如若为false只显示屏幕内。必要属性，其他属性自己试试即可

TabBar(
            //未选中tab的颜色
            unselectedLabelColor: Colors.black54,
            //选中tab的颜色
            labelColor: Colors.blue,
            //indicator颜色
            indicatorColor: Colors.blue,
            //indicator高度
            indicatorWeight: 2,
            controller: controller,
            tabs: tabs,
            isScrollable: false,
          ),

②expand--TabBarview：controler、children，孩子放置对应的界面，类似fragment

 Expanded(
              child: TabBarView(
            controller: controller,
            children: <Widget>[
              NormalScreen(),
              MaterialWidgetScreen(),
              AnimationScreen()
            ],
          ))

image.png

完整案例：

class KnowledgePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _KnowledgePage();
  }
}

class _KnowledgePage extends State<KnowledgePage>
    with TickerProviderStateMixin {
  TabController _tabController;
  List<Tab> tabs = [
    Tab(
      text: '汽车',
    ),
    Tab(
      text: '美女',
    ),
    Tab(
      text: '工作',
    ),
    Tab(
      text: '明星',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    _tabController = new TabController(length: tabs.length, vsync: this);
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.red,
            child: TabBar(
              isScrollable: false,
              indicatorColor: Colors.white,
              tabs: tabs,
              controller: _tabController,
            ),
          ),
          Expanded(
              child: TabBarView(
            children: tabs.map((Tab tab) {
              return Center(
                  child: Text(
                tab.text,
                style: TextStyle(fontSize: 50, color: Colors.red),
              ));
            }).toList(),
            controller: _tabController,
          ))
        ],
      ),
    );
  }
}

四、BottomNavigationBar

属性

属性名称	类型	说明
currentIndex	int	当前索引，用来切换按钮控制
fixedColor	Color	选中按钮颜色。如果没有指定，则用系统主题色
iconSize	double	图标大小
items	List<BottomNavigationBarItem>	底部导航条按钮
onTap	ValueChaged<int>	按下其中一个按钮的回调。需要根据返回的索引设置当前索引

案例：实现底部导航功能
前提：在脚手架scaffold架构下边的一个功能模块
组件：BottomNavigationBar、Scaffold

定义当前索引_curIndex，用来确定切换的哪个页面

//当前选中的索引
  int _curIndex = 0;

定义当前页面_currentScreen

//当前页面
  var _currentScreen;

定义Appbar标题集合，统一管理

//AppBar标题文字
  final appBarTitles = ["首页", "组件", "容器", "其他"];

每个页面的集合

//页面集合
  final List PageList = [
    HomeScreen(),
    WidgetScreen(),
    ThirdScreen(),
    FourthScreen()
  ];

底部导航条目，包含标题和图标

 //底部导航条目集合
  List<BottomNavigationBarItem> list = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
    BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("组件")),
    BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
    BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
  ];

初始化一个页面

 @override
  void initState() {
    super.initState();
    _currentScreen = PageList[_curIndex];
  }

布局中写脚手架scaffold：
①Appbar：设置标题
②body：2中的当前页面：_currentScreen
③drawer：侧滑界面，自定义一个有状态的界面
④BottomNavigationBarType底部导航：items、ontap，index，type

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '${appBarTitles[_curIndex]}',
          style: TextStyle(color: Colors.white),
        ),
        //图标主题设置
        iconTheme: IconThemeData(color: Colors.white),
        //设置标题是否居中
        centerTitle: true,
        //toolbar显示的菜单
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {})
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: list,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            _currentScreen = PageList[_curIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
      body: _currentScreen,
      //侧滑菜单
      drawer: Drawer(
        child: DrawerScreen(),
        elevation: 0,
      ),
    );
  }
}

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_fly/ui/home_screen.dart';
import 'package:flutter_fly/ui/widget_screen.dart';
import 'package:flutter_fly/ui/third_screen.dart';
import 'package:flutter_fly/ui/fourth_screen.dart';
import 'package:flutter_fly/ui/drawer_screen.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  //当前选中的索引
  int _curIndex = 0;

  //AppBar标题文字
  final appBarTitles = ["首页", "组件", "容器", "其他"];

  //当前页面
  var _currentScreen;

  //底部导航条目集合
  List<BottomNavigationBarItem> list = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
    BottomNavigationBarItem(icon: Icon(Icons.widgets), title: Text("组件")),
    BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text("容器")),
    BottomNavigationBarItem(icon: Icon(Icons.devices_other), title: Text("其他")),
  ];

  //页面集合
  final List PageList = [
    HomeScreen(),
    WidgetScreen(),
    ThirdScreen(),
    FourthScreen()
  ];

  @override
  void initState() {
    super.initState();
    _currentScreen = PageList[_curIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '${appBarTitles[_curIndex]}',
          style: TextStyle(color: Colors.white),
        ),
        //图标主题设置
        iconTheme: IconThemeData(color: Colors.white),
        //设置标题是否居中
        centerTitle: true,
        //toolbar显示的菜单
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {})
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: list,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            _currentScreen = PageList[_curIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
      body: _currentScreen,
      //侧滑菜单
      drawer: Drawer(
        child: DrawerScreen(),
        elevation: 0,
      ),
    );
  }
}

五、 Drawer（抽屉组件）

Drawer类似Android中的DrawerLayoutView的功能，即抽屉菜单，可以从侧边拉出来。一般结合Listview组件实现效果，常见属性：

drawer: Drawer(
        child: DrawaerScreen(),//可以放置任意Widget
        elevation: 2.0,//materialDesign组件的z坐标顺序
      ),

设置头部效果以及列表

class DrawaerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        //设置用户信息、头像、用户名、Email等
        UserAccountsDrawerHeader(
          accountName: Text("大飞"),
          accountEmail: Text("dafei@163.com"),
          currentAccountPicture: CircleAvatar(
            backgroundImage: AssetImage('assets/images/avatar.jpg'),
          ),
          onDetailsPressed: () {
            print("点击");
          },
          otherAccountsPictures: <Widget>[
            Container(
              child: Text('其他信息'),
            )
          ],
        ),
        ListTile(
          leading: Icon(
            Icons.settings,
            color: Colors.red,
          ),
          title: Text('设置'),
        ),
        ListTile(
          leading: Icon(
            Icons.person_add,
            color: Colors.red,
          ),
          title: Text('登录'),
          onTap: () {

          },
        )
      ],
    );
  }
}

Flutter六：Material Design风格Widget

Flutter六：Material Design风格Widget

提纲

一、 MaterialApp（应用组件）

二、 scaffold（脚手架组件） [ˈskæfəʊld]

三、AppBar（应用按钮组件）

TabBar

1. 属性：

2. 案例：实现tab切换功能

四、BottomNavigationBar

五、 Drawer（抽屉组件）

填充（Padding）

六、尺寸限制类容器（ConstrainedBox、SizedBox、UnconstrainedBox、多重限制、其7. 它尺寸限制类容器）

七、装饰容器（DecorationBox）

八、变换（Transform）

九、剪裁（Clip）

Flutter六：Material Design风格Widget

提纲

一、 MaterialApp（应用组件）

二、 scaffold（脚手架组件） [ˈskæfəʊld]

三、AppBar（应用按钮组件）

TabBar

1. 属性：

2. 案例：实现tab切换功能

四、BottomNavigationBar

五、 Drawer（抽屉组件）

填充（Padding）

六、 尺寸限制类容器（ConstrainedBox、SizedBox、UnconstrainedBox、多重限制、其7. 它尺寸限制类容器）

七、 装饰容器（DecorationBox）

八、 变换（Transform）

九、剪裁（Clip）

六、尺寸限制类容器（ConstrainedBox、SizedBox、UnconstrainedBox、多重限制、其7. 它尺寸限制类容器）

七、装饰容器（DecorationBox）

八、变换（Transform）