美文网首页
Flutter六:Material Design风格Widget

Flutter六:Material Design风格Widget

作者: Anwfly | 来源:发表于2020-05-19 21:28 被阅读0次

    提纲

    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切换功能

    1. 定义一个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          )),
      ];
    
    1. 定义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
    1. 定义当前索引_curIndex,用来确定切换的哪个页面
    //当前选中的索引
      int _curIndex = 0;
    
    1. 定义当前页面_currentScreen
    //当前页面
      var _currentScreen;
    
    1. 定义Appbar标题集合,统一管理
    //AppBar标题文字
      final appBarTitles = ["首页", "组件", "容器", "其他"];
    
    1. 每个页面的集合
    //页面集合
      final List PageList = [
        HomeScreen(),
        WidgetScreen(),
        ThirdScreen(),
        FourthScreen()
      ];
    
    1. 底部导航条目,包含标题和图标
     //底部导航条目集合
      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("其他")),
      ];
    
    1. 初始化一个页面
     @override
      void initState() {
        super.initState();
        _currentScreen = PageList[_curIndex];
      }
    
    1. 布局中写脚手架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: () {
    
              },
            )
          ],
        );
      }
    }
    

    填充(Padding)

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

    七、 装饰容器(DecorationBox)

    八、 变换(Transform)

    九、剪裁(Clip)

    相关文章

      网友评论

          本文标题:Flutter六:Material Design风格Widget

          本文链接:https://www.haomeiwen.com/subject/vzdbgctx.html