Flutter——Materia Design元件集合

江湖救急發表於2019-09-20

前言

開發過程中，有的時候忘記元件如何使用，不得不去查詢筆記，之前學習的時候沒有好好整理出來，很零散，所以下定決心好好整理一番，把目前常用到的Materia相關元件做成一個集合式的部落格文章，以便時常翻閱，開發的時候再也不用到處找相關文章了。另外，可能本文的內容也不一定很全，希望小夥伴們在此基礎上再自己深耕，進一步提高自己對Materia的認識。

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似乎是一個很好的解決方案，在最大限度保證可讀性的基礎上有一些我們熟悉的物理現實的影子。所以一定程度上它既是擬物的也是扁平的。

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的實現需要以下元件配合完成

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()，都會報異常，不知道小夥伴們有沒有碰到這種情況，目前我還沒解決，希望有碰到這種情況的小夥伴給我留言，謝謝。

異常資訊如下:

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，案例效果

結束

整個過程的整理還是有點花時間的，但是也值得，以後就方便查閱了。

案例中還有很多不足的地方需要慢慢完善，有很多屬性沒有一一列舉，後續專案中如果碰到相關屬性使用再繼續新增。

案例中如果有錯誤的地方，希望小夥伴們指正，不勝感激！

flutter的進階之路之Material Design與IOS風格元件
2019-09-03
FlutterMaterial DesigniOS元件
Material Design元件之AppBarLayout
2019-05-12
Material Design元件APP
Material Design 元件之FloatingActionButton
2019-05-10
Material Design元件
Material Design 元件之FloatingActionBu
2021-09-09
Material Design元件
Material Design Lite元件之徽章
2018-05-29
Material Design元件
Ant Design 元件 —— Form表單（一）
2018-12-03
元件ORM
Material Design Lite元件之按鈕
2018-05-29
Material Design元件
Flutter元件
2024-03-03
Flutter元件
Ant Design UI元件之Select踩坑
2019-02-27
UI元件
ant-design-pro IE9下報錯集合
2018-10-07
IE9
Flutter元件Image
2021-04-06
Flutter元件
ant-design-vue元件庫原始碼分析
2021-10-26
Vue元件原始碼
Flutter元件學習（一）—— Text元件
2018-11-26
Flutter元件
Flutter 元件總結
2019-02-24
Flutter元件
Flutter | ConstrainedBox & UnconstrainedBox 元件
2019-12-08
FlutterAI元件
Flutter元件大全(四)
2020-06-01
Flutter元件
Flutter元件大全(五)
2020-06-01
Flutter元件
Flutter元件大全(一)
2020-05-24
Flutter元件
Flutter元件總結
2021-08-17
Flutter元件
Flutter | 佈局元件
2021-03-02
Flutter元件
Ant Design Vue 表單元件未提及的方法
2019-01-19
Vue元件
ant design 中的 Select 元件常規寫法
2018-11-27
元件
Material Design - 常用控制元件介紹和使用
2018-07-13
Material Design控制元件
QFluentWidgets: 基於 C++ Qt 的 Fluent Design 元件庫
2023-10-04
C++QT元件
可配置元件庫Fusion Design 瞭解一下
2019-03-04
元件
阿里雲 ANT DESIGN PRO 開發筆記 - 元件篇
2021-03-13
阿里筆記元件
Flutter 拖拽排序元件 ReorderableListView
2020-03-07
Flutter排序元件View
Flutter | 1.9 全新元件 ToggleButtons
2019-09-16
Flutter元件
Flutter widget元件簡介
2019-08-29
Flutter元件
7. Flutter——GridView元件
2020-10-30
FlutterView元件
Flutter元件之ChoiceChip教程
2020-04-27
Flutter元件
Flutter自定義元件-MultiShower
2019-07-12
Flutter元件
Flutter控制元件--AppBar
2019-04-26
Flutter控制元件APP
Unity的Flutter元件渲染
2021-08-27
UnityFlutter元件
記一次 Ant Design Menu元件的使用與深入
2019-02-23
元件
使用 Vue + Ant Design UI 元件展示足球比賽資料
2018-08-19
VueUI元件
Flutter新手入門常用元件總結，讓你瞭解更多的Flutter元件？
2021-04-06
Flutter元件
Flutter 系列文章：Flutter Text 控制元件介紹
2019-03-19
Flutter控制元件