Flutter——Materia Design组件集合

时间 2019-11-05

原文原文链接

前言

开发过程当中，有的时候忘记组件如何使用，不得不去查找笔记，以前学习的时候没有好好整理出来，很零散，因此下定决心好好整理一番，把目前经常使用到的Materia相关组件作成一个集合式的博客文章，以便时常翻阅，开发的时候不再用处处找相关文章了。另外，可能本文的内容也不必定很全，但愿小伙伴们在此基础上再本身深耕，进一步提升本身对Materia的认识。android

Materia Design介绍

Material Design 不只仅是安卓阵营产品的设计规范和风格，甚至它鼓励设计师和开发者把这种风格用在苹果设备和 windows设备上。做为设计规范，它很包容，却有时又很是严格。使用了 Material Design 的产品给人很强的统一感和秩序感。若是从历史来看的话，Google 的产品历来没有一个正式严格的视觉规范。甚至每一个产品线都有本身的设计风格和本身的品牌。但2011年后，拉里佩奇掌握了 Google 的控制权后，他改变了那种过去「程序员主导一切」的状况，他召集了谷歌最好的设计师一块儿从新设计了全部产品的语言，终于在2014年的 Google I/O 上推出了 Material Design，宣告 Google 重视设计的时代来了。Google旗下的电脑、穿戴设备、电视等设备均可以使用 Material Design 做为视觉规范，甚至 Google 鼓励开发者在 iOS平台也使用 Material Design。Google 的 Material Design 并非简单的扁平设计，而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。这种风格造成了独一无二的 Material Design。Material Design 的目标是建立一种优秀的设计原则和科学技术融合的可能性（Create）、并给不一样平台带来一致性的体验（Unify）、而且能够在规范的基础上突出设计者本身的品牌性（Customize）。
程序员

Material Design 并非彻底的抽象扁平风格，它从物理现实中学习了诸如质感、投影、加速度、纸张的模拟等隐喻方法，这些都会让 Material Design 更容易被用户理解。其实咱们知道Google一直在尝试不一样的设计风格，好比很早以前的长投影设计风格、后来的扁平化设计实验等。扁平化设计的优点就是信息噪音少，而缺点就是情感传递不足，而 Material Design似乎是一个很好的解决方案，在最大限度保证可读性的基础上有一些咱们熟悉的物理现实的影子。因此必定程度上它既是拟物的也是扁平的。
windows

Flutter 中Materia Design经常使用组件分类

AppBar 应用导航栏组件
BottomNavigationBar 底部导航条组件
TabBar 水平选项卡及视图组件
Drawer 抽屉组件
FloatingActionButton 悬停按钮组件
FlatButton 扁平按钮组件
PopupMenuButton 弹出菜单组件
SimpleDialog 简单对话框组件
AlertDialog 提示对话框组件
SnackBar 底部消息提示组件
TextField 文本框组件
Card 卡片组件

内容准备

1,案例中用到第三方插件OKToast,依赖以下,请自行拉取依赖导包

oktoast: ^2.1.7
复制代码

2,建立main.dart,案例中只须要引入单独的组件文件，设置到home属性上，测试的时候自行切换不一样组件文件查看组件效果,以MyAppBar为例。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.redAccent,
      ),
      home: MyAppBar(),
    );
  }
}复制代码

3,案例组件文件中，对应属性有介绍，如需了解其余属性，可在基础上自行修改测试

一：AppBar

1，组件文件代码示例

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';

///create time : 2019/9/19/019  15:32
///create by : Administrator
///des:

class MyAppBar extends StatefulWidget {
  @override
  _MyAppBarState createState() => _MyAppBarState();
}

class _MyAppBarState extends State<MyAppBar> {
  Widget SelectView(
      IconData icon, String text, String id, BuildContext context) {
    return new PopupMenuItem<String>(
        value: id,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Icon(icon, color: Theme.of(context).primaryColor),
            SizedBox(
              width: 5.0,
            ),
            Text(text),
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),//导航栏标题
        leading: IconButton(  //标题前显示的组件，一般显示图标
            icon: Icon(Icons.home),
            onPressed: () {
              showToast("首页");
            }),
        actions: <Widget>[  //一个Widget列表,对于经常使用的菜单显示到导航栏上，对应不常显示的一般用PopupMenuButton来显示为三个点，点击弹出二级菜单
          IconButton(
              icon: Icon(Icons.notifications),
              onPressed: () {
                showToast("通知");
              }),
          IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                showToast("添加");
              }),
          IconButton(
              icon: Icon(Icons.share),
              onPressed: () {
                showToast("分享");
              }),
          // 隐藏的菜单
          new PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              this.SelectView(Icons.search, '搜索好文', 'A', context),
              this.SelectView(Icons.book, '掘金小册', 'B', context),
              this.SelectView(Icons.star, '个人关注', 'C', context),
            ],
            onSelected: (String action) {
              // 点击选项的时候
              switch (action) {
                case 'A':
                  showToast("搜索好文");
                  break;
                case 'B':
                  showToast("掘金小册");
                  break;
                case 'C':
                  showToast("个人关注");
                  break;
              }
            },
          ),
        ],
      ),
    );
  }
}复制代码

2，案例效果

二:BottomNavigationBar

1,组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/19/019  15:34
///create by : Administrator
///des:

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  List<String> navs = ["首页", "做品", "发现", "个人"]; //导航标题集合
  List<IconData> icons = [
    //导航图标集合
    Icons.home,
    Icons.polymer,
    Icons.filter_tilt_shift,
    Icons.account_circle
  ];
  int _currentIndex = 0; //当前索引，用来切换按钮控制
  List<BottomNavigationBarItem> createBarItems() {
    //建立底部导航按钮集合
    List<BottomNavigationBarItem> items = [];

    for (int i = 0; i < navs.length; i++) {
      items.add(
          BottomNavigationBarItem(icon: Icon(icons[i]), title: Text(navs[i])));
    }

    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("底部导航"),
      ),
      body: Center(
        child: Text(this.navs[_currentIndex]),
      ),
      bottomNavigationBar: BottomNavigationBar(
          items: createBarItems(),
          currentIndex: this._currentIndex,
          type: BottomNavigationBarType.fixed,
          onTap: _selectTap), //底部按钮点击回调事件
    );
  }

  void _selectTap(int index) {
    setState(() {
      this._currentIndex = index;
    });
  }
}
复制代码

2，案例效果

三：TabBar

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/19/019  15:39
///create by : Administrator
///des:

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> {
  static List<String> tabTitles = ["视频", "书籍", "电脑", "工具", "创意", "手机", "蓝牙"];
  static List<IconData> icons = [Icons.video_call, Icons.book, Icons.computer, Icons.pan_tool, Icons.wb_incandescent,Icons.tablet_android, Icons.bluetooth];
  static List<Tab> tabs = createTabs();
  static List<Center> contents = [];
  static List<Tab> createTabs() {
    List<Tab> tabs = [];
    for (int i = 0; i < tabTitles.length; i++) {
      tabs.add(Tab(text: tabTitles[i],icon: Icon(icons[i])));
      contents.add(Center(child: Text(tabTitles[i])));
    }
    return tabs;
  }



  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabTitles.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text("水平选项卡"),
          bottom: TabBar(tabs: tabs,isScrollable: true,),

        ),
        body: TabBarView(children: contents),
      ),
    );
  }
}复制代码

2，说明

TabBar的实现须要如下组件配合完成bash

DefaultTabController 它是TabBar和TabBarView的控制器，关联两者的桥梁
TabBar 水平选项组件
Tab 选项卡子项
TabBarView 选项卡对应视图

3，案例效果

四：Drawer

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/19/019  16:16
///create by : Administrator
///des:


class MyDrawer extends StatefulWidget {
  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero, //这个设置防止抽屉头部出现一段灰色
            children: <Widget>[
              UserAccountsDrawerHeader(  //抽屉头部组件
                accountName: Text("张三疯"), //用户名称
                accountEmail: Text("464613131@qq.com"), //用户邮箱
                currentAccountPicture: CircleAvatar( //用户头像
                    backgroundImage: AssetImage("images/zsf.jpg"),
                ),
              ),
              ListTile(  
                leading: CircleAvatar(child: Icon(Icons.color_lens)),
                title: Text("个性装扮"),
              ),
              ListTile(
                leading: CircleAvatar(child: IconButton(icon: Icon(Icons.photo), onPressed: (){})),
                title: Text("个人相册"),
              ),
              ListTile(
                leading: CircleAvatar(child: Icon(Icons.wifi_tethering)),
                title: Text("个人主题"),
              ),

            ],
          ),
      ),
      body: Center(),

    );
  }
}

复制代码

2，案例效果

五：FloatingActionButton

1，组件文件代码示例

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';

///create time : 2019/9/20/020  9:00
///create by : Administrator
///des:

class MyFloatActionButton extends StatefulWidget {
  @override
  _MyFloatActionButtonState createState() => _MyFloatActionButtonState();
}

class _MyFloatActionButtonState extends State<MyFloatActionButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("悬停按钮"),
      ),
      body: Center(),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            showToast("悬停按钮");
          },
          tooltip: "添加文章", //按钮提示文本 长按显示该文本
          foregroundColor: Colors.black87,  //前景色
          backgroundColor: Colors.yellow,   //背景色
          elevation: 8.0, //未点击是阴影值，默认为6.0
          highlightElevation: 14.0, //点击时的阴影值,默认为12.0
          shape:BeveledRectangleBorder(), //按钮形状，默认为圆形，预设的形状有:CircleBorder  RoundedRectangleBorder ContinuousRectangleBorder BeveledRectangleBorder
          child: Icon(Icons.add)),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, //按钮位置
    );
  }
}
复制代码

2，案例效果

六：FlatButton

1，组件文件代码示例

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';

///create time : 2019/9/20/020  9:18
///create by : Administrator
///des:

class MyFlatButton extends StatefulWidget {
  @override
  _MyFlatButtonState createState() => _MyFlatButtonState();
}

class _MyFlatButtonState extends State<MyFlatButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("扁平按钮组件"),
      ),
      body: Center(
        child: FlatButton(
            textColor: Colors.red, //按钮文字颜色
            hoverColor: Colors.blue,
            onPressed: () {
              showToast("我是扁平按钮");
            },
            child: Text("FlatButton")),
      ),
    );
  }
}

复制代码

2，案例效果

七：PopupMenuButton

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  9:24
///create by : Administrator
///des:

class MyPopuMenuButton extends StatefulWidget {
  @override
  _MyPopuMenuButtonState createState() => _MyPopuMenuButtonState();
}

class _MyPopuMenuButtonState extends State<MyPopuMenuButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("弹出菜单组件")),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          onPressed: () {},
          textColor: Colors.white,
          child: PopupMenuButton(
            child: Text("弹出菜单"),
            tooltip: "长按提示",
            initialValue: "new", // 默认菜单显示项
            padding: EdgeInsets.all(0.0),
            itemBuilder: (BuildContext context) {//菜单选项构造器，菜单为任意类型，文本，图标
              return <PopupMenuItem<String>>[
                PopupMenuItem<String>(
                  child: Text("热度"),
                  value: "hot",
                ),
                PopupMenuItem<String>(
                  child: Text("最新"),
                  value: "new",
                ),
              ];
            },
            onSelected: (String action) {//菜单点击回调
              switch (action) {
                case "hot":
                  print("热度");
                  break;
                case "new":
                  print("最新");
                  break;
              }
            },
            onCanceled: () {
              print("onCanceled");
            },
          ),
        ),
      ),
    );
  }
}
复制代码

2，案例效果

八：SimpleDialog

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  10:08
///create by : Administrator
///des:

class MySimpleDialog extends StatefulWidget {
  @override
  _MySimpleDialogState createState() => _MySimpleDialogState();
}

class _MySimpleDialogState extends State<MySimpleDialog> {
  var offAndOn = true; 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SimpleDialog"),
      ),
      body: Center(
          child: Offstage(  //用于组件是否隐藏
              offstage: offAndOn,
              child: SimpleDialog(
                title: Text("对话框"),
                children: <Widget>[
                  SimpleDialogOption(
                    onPressed: () {},
                    child: Text("第一行代码"),
                  ),
                  SimpleDialogOption(
                    onPressed: () {},
                    child: Text("第二行代码"),
                  ),
                  SimpleDialogOption(
                    onPressed: () {},
                    child: Text("第三行代码"),
                  ),
                ],
              ))),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            offAndOn =!offAndOn;
          });

        },
        child: Icon(Icons.bubble_chart),
        tooltip: "打开对话框",
      ),
    );
  }
}
复制代码

2，案例效果

九：AlertDialog

1，组件文件代码示例

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';

///create time : 2019/9/20/020  10:24
///create by : Administrator
///des:

class MyAlertDialog extends StatefulWidget {
  @override
  _MyAlertDialogState createState() => _MyAlertDialogState();
}

class _MyAlertDialogState extends State<MyAlertDialog> {
  var offAndOn = true;
  Widget buildButton(
      String text,
      Function onPressed, {
        Color color = Colors.white,
      }) {
    return FlatButton(
      color: color,
      child: Text(text),
      onPressed: onPressed,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AlertDialog-提示对话框"),
      ),
      body: Container(
          child: Offstage(
        offstage: offAndOn,
        child: AlertDialog(
          title: Text("提示"),
          elevation: 10.0,
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text("是否删除本条记录?"),
                Text("操做不可逆，请谨慎操做!"),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
                onPressed: () {
                  showToast("肯定");
                  setState(() {
                    offAndOn = !offAndOn;
                  });
                },
                child: Text("肯定")),
            FlatButton(
                onPressed: () {
                  showToast("取消");
                  setState(() {
                    offAndOn = !offAndOn;
                  });
                },
                child: Text("取消")),
          ],
        ),
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            offAndOn = !offAndOn;
          });
        },
        child: Text("弹框"),
      ),

    );
  }
}
复制代码

2，案例效果

3，显示自定义Dialog

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  10:56
///create by : Administrator
///des:

class MyCustomDialog extends StatefulWidget {
  @override
  _MyCustomDialogState createState() => _MyCustomDialogState();
}

class _MyCustomDialogState extends State<MyCustomDialog> {
  Widget _dialogWidget(BuildContext context) {
    return Center(
      child: Container(
          width: 300.0,
          height: 240.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            boxShadow: [
              //设置阴影
              BoxShadow(
                  color: Colors.black54,
                  offset: Offset(4.0, 4.0),
                  blurRadius: 4.0),
            ],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(
                alignment: Alignment.center,
                child: Text("选择图像",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                        decoration: TextDecoration.none)),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Container(
                    width: 140.0,
                    height: 140.0,
                    child: Image.asset("images/man.jpg"),
                  ),
                  Container(
                    width: 140.0,
                    height: 140.0,
                    child: Image.asset("images/woman.jpg"),
                  )
                ],
              ),
              Container(
                alignment: Alignment.topRight,
                child: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FlatButton(
                          onPressed: (){
                              Navigator.of(context).pop("肯定");
                          },
                          child: Text("肯定",
                              style:
                                  TextStyle(decoration: TextDecoration.none,color: Colors.white))),
                      FlatButton(
                          onPressed: (){
                            Navigator.of(context).pop("取消");
                          },
                          child: Text("取消",
                              style:
                                  TextStyle(decoration: TextDecoration.none,color: Colors.white))),
                      SizedBox(width: 10.0,)

                    ],
                  ),
                ),
              ),
            ],
          )),
    );
  }

  void showCustomDialog(BuildContext context) async {
    var result = await showDialog(context: context, builder: _dialogWidget);
    print("result is ${result}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义对话框"),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            showCustomDialog(context);
          },
          child: Text("弹框")),
    );
  }
}
复制代码

4，案例效果

十：SnackBar

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  13:14
///create by : Administrator
///des:

class MySnackBar extends StatefulWidget {
  @override
  _MySnackBarState createState() => _MySnackBarState();
}

class _MySnackBarState extends State<MySnackBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SnackBar"),
      ),
      floatingActionButton: Builder(builder: (context) {
        return FloatingActionButton(
          onPressed: () {
            Scaffold.of(context).showSnackBar(SnackBar(
              content: Text("是否退出应用程序?",style: TextStyle(color: Colors.white)), //提示消息内容
              action: SnackBarAction(label: "撤销", onPressed: () {},textColor: Colors.white,), //提示消息执行的动做
              backgroundColor: Theme.of(context).primaryColor, //消息面板背景色
              duration: Duration(seconds: 1), //Snackbar存在时长
            ));
          },
          child: Icon(Icons.call_missed_outgoing),
        );
      }),
    );
  }
}
复制代码

2，案例效果

十一：TextField

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  13:46
///create by : Administrator
///des:

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController controller = TextEditingController();


  @override
  Widget build(BuildContext context) {
    controller.addListener((){

    });


    return Scaffold(
      appBar: AppBar(
        title: Text("TextField"),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: TextField(
            controller: controller,
            maxLength: 30, //输入内容最大长度
            maxLines: 1, //最大行数
            autocorrect: true, //是否自动更正
            autofocus: false, //是否自动获取焦点
            obscureText: false, //是否为密码
            textAlign: TextAlign.left, //输入文本排列方式
            style: TextStyle(fontSize: 16.0, color: Colors.black),
            onChanged: (value) {
              print("input value is ${value}");
            },
            onSubmitted: (text) {
              //输入完成后，弹出键盘上点击完成时回调
              print("内容提交回调 ${text}");
            },
            enabled: true, //禁止输入
            cursorColor: Colors.blue,
            decoration: InputDecoration(
              //添加装饰
              fillColor: Colors.blue, //填充色
              prefixIcon:
                  Icon(Icons.supervisor_account, color: Colors.blue), //左边图标
              hintText: "用户名",
              helperText: "手机/邮箱",
              helperStyle: TextStyle(color: Colors.blue),
              suffixIcon: IconButton(onPressed: (){controller.clear();},icon: Icon(Icons.clear,color: Colors.black38),), //右边图标
            ),
          ),
        ),
      ),
    );
  }
}
复制代码

2，案例效果

3，异常问题

当咱们清楚输入内容的时候，不论是用controller.text=""仍是controller.clear()，都会报异常，不知道小伙伴们有没有碰到这种状况，目前我还没解决，但愿有碰到这种状况的小伙伴给我留言，谢谢。app

异常信息以下:less

W/IInputConnectionWrapper(32565): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(32565): getTextBeforeCursor on inactive InputConnection
I/flutter (32565): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (32565): The following assertion was thrown while handling a gesture:
I/flutter (32565): invalid text selection: TextSelection(baseOffset: 8, extentOffset: 8, affinity:
I/flutter (32565): TextAffinity.upstream, isDirectional: false)
I/flutter (32565): 
I/flutter (32565): When the exception was thrown, this was the stack:
I/flutter (32565): #0 TextEditingController.selection= (package:flutter/src/widgets/editable_text.dart:193:7)
I/flutter (32565): #1 EditableTextState._handleSelectionChanged (package:flutter/src/widgets/editable_text.dart:1379:23)
I/flutter (32565): #2 RenderEditable._handlePotentialSelectionChange (package:flutter/src/rendering/editable.dart:388:5)
I/flutter (32565): #3 RenderEditable.selectPositionAt (package:flutter/src/rendering/editable.dart:1487:9)
I/flutter (32565): #4 RenderEditable.selectPosition (package:flutter/src/rendering/editable.dart:1459:5)
I/flutter (32565): #5 _TextFieldSelectionGestureDetectorBuilder.onSingleTapUp (package:flutter/src/material/text_field.dart:98:26)
I/flutter (32565): #6 _TextSelectionGestureDetectorState._handleTapUp (package:flutter/src/widgets/text_selection.dart:1264:16)
I/flutter (32565): #7 TapGestureRecognizer._checkUp.<anonymous closure> (package:flutter/src/gestures/tap.dart:363:49)
I/flutter (32565): #8 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
I/flutter (32565): #9 TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:363:11)
I/flutter (32565): #10 TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:312:7)
I/flutter (32565): #11 _TransparentTapGestureRecognizer.rejectGesture (package:flutter/src/widgets/text_selection.dart:1466:7)
I/flutter (32565): #12 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:159:26)
I/flutter (32565): #13 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:222:20)
I/flutter (32565): #14 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
I/flutter (32565): #15 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
I/flutter (32565): #16 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
I/flutter (32565): #17 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
I/flutter (32565): #21 _invoke1 (dart:ui/hooks.dart:263:10)
I/flutter (32565): #22 _dispatchPointerDataPacket (dart:ui/hooks.dart:172:5)
I/flutter (32565): (elided 3 frames from package dart:async)
I/flutter (32565): 
I/flutter (32565): Handler: "onTapUp"
I/flutter (32565): Recognizer:
I/flutter (32565):   _TransparentTapGestureRecognizer#cf2ed
I/flutter (32565): ════════════════════════════════════════════════════════════════════════════════════════════════════
复制代码

十二：Card

1，组件文件代码示例

import 'package:flutter/material.dart';

///create time : 2019/9/20/020  14:52
///create by : Administrator
///des:

class MyCard extends StatefulWidget {
  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Card 卡片组件"),
      ),
      body: Center(
        child: SizedBox(
          height: 180.0,
          child: Card(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Item("湖北省武汉市洪山区珞喻路718号","湖北省通讯局",Icons.home),
                Divider(height: 1.0,color: Colors.black26),
                Item("湖北省武汉市蔡甸区华源商务广场","武汉市杰特培训机构",Icons.school),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


class Item extends StatelessWidget{
  String title;
  String subTitle;
  IconData icon;


  Item(this.title, this.subTitle, this.icon);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title,style: TextStyle(fontWeight: FontWeight.w300)),
      subtitle: Text(subTitle),
      leading: Icon(icon,color: Colors.lightBlue),
    );
  }
  
}复制代码

2，案例效果

结束

整个过程的整理仍是有点花时间的，可是也值得，之后就方便查阅了。async

案例中还有不少不足的地方须要慢慢完善，有不少属性没有一一列举，后续项目中若是碰到相关属性使用再继续添加。ide

案例中若是有错误的地方，但愿小伙伴们指正，不胜感激！工具