Flutter新手入門常用組件總結(jié)羊瘩，讓你了解更多的Flutter組件？

因?yàn)閷W(xué)完flutter之后摇予，感覺對(duì)一些組件的使用不是很熟悉侧戴，記錄一些鞏固一下知識(shí)酗宋，組件過多寂曹，我不會(huì)寫的非常詳細(xì)隆圆，而且如果你不是很熟悉這些軟件有那些功能的話渺氧，你可以點(diǎn)進(jìn)去看這個(gè)組件的源碼侣背，都是用dart語(yǔ)言編寫贩耐，看起來也比較輕松憔杨，但是我會(huì)把關(guān)于那個(gè)組件詳細(xì)博客的地址鏈接放出來抛蚤，以便日后的學(xué)習(xí)和查詢朋沮，使用組件的時(shí)候樊拓，直接套娃就行。

1.MaterialApp

 MaterialApp(
      title: 'Flutter Demo', // 指定應(yīng)用程序在任務(wù)欄上顯示的標(biāo)題
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),       // 配置應(yīng)用程序的主題
      home: Center(
        child: Text("MaterialApp"),
      )   // 指定應(yīng)用程序的主界面
    );

2.Scaffold

Scaffold 實(shí)現(xiàn)了基本的 Material 布局条篷。只要是在 Material 中定義了的單個(gè)界面顯示的布局控件元素赴叹，都可以使用 Scaffold 來繪制涨椒。

Scaffold(
        appBar: AppBar(
          title: Text('頁(yè)面標(biāo)題'),
        ),//頭部導(dǎo)航條區(qū)域
        body: Center(
          child: Text('主體內(nèi)容'),
        ),//頁(yè)面主題內(nèi)容區(qū)域
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),//右下角浮動(dòng)按鈕區(qū)域
        drawer: Drawer(),   //側(cè)邊欄抽屜區(qū)域
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon:Icon(
                Icons.home,
                color: Colors.grey,
              ),
              activeIcon: Icon(
                Icons.home,
                color: Colors.blue,
              ),
              title: Text('首頁(yè)'),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.list,
                color: Colors.grey,
              ),
              activeIcon: Icon(
                Icons.list,
                color: Colors.blue,
              ),
              title: Text('列表'),
            )
          ],
        ),
      ),//底部tabBar區(qū)域

效果：

在這里插入圖片描述

參考博客地址：https://blog.csdn.net/qq_18948359/article/details/82181475
如果想去了解這個(gè)組件的些椒，可以去看一下這篇博客赢乓，說的很詳細(xì)牌芋。

3.Container

Container(
        width: 200,  //寬度
        height: 200,  //長(zhǎng)度
        child: Text("不錯(cuò)"),  //子組件
        decoration: BoxDecoration(
          color: Colors.blue,
        ),   //裝飾器
        padding: EdgeInsets.all(10),   //內(nèi)容距離盒子邊界的距離
        margin: EdgeInsets.all(10)   //盒子邊界之外的距離
      ),

4.BoxDecoration（裝飾器）

Center(
      child: Container(
       width: 200,
       height: 200,
       decoration: BoxDecoration(
       color: Colors.blue,   //顏色背景
       image: DecorationImage(
         image: NetworkImage("http://wx4.sinaimg.cn/mw690/6a04b428gy1fyrldlsv4yg204r05i3yt.gif"),
         //背景圖片
         fit: BoxFit.cover,  //圖片充滿組件
       )，
       border: Border.all(
          color: Colors.red,
          width: 5.0,
        )),   //設(shè)置邊框
       ),
   )
 )

關(guān)于BoxDecoration的使用犀暑，可以看一下https://blog.csdn.net/u014112893/article/details/107819564非常詳細(xì)。

5.Row（橫向排布）

使內(nèi)部的 children 子元素橫向布局广辰。

Row(
  children: <Widget>[
    Expanded(child: Text('主體內(nèi)容1'), flex: 2,),
    Expanded(child: Text('主體內(nèi)容2'), flex: 1,)
  ]
)

6.Column（縱向排布）

使內(nèi)部的 children 子元素縱向布局

Column(
   children: <Widget>[
     Expanded(child: Text('主體內(nèi)容1'), flex: 2,),
     Expanded(child: Text('主體內(nèi)容2'), flex: 1,)
   ]
),

7.Expanded和Flexible

兩個(gè)功能相似，區(qū)別是Flexible不會(huì)空白區(qū)域自動(dòng)填充

代碼：

 Row(
     children: <Widget>[
        RaisedButton(
          onPressed: () {
          },
          color: const Color(0xffcc0000),
          child: new Text('紅色按鈕'),
        ),
        Flexible(
          flex: 1,
          child: RaisedButton(
            onPressed: () {
            },
            color: const Color(0xfff1c232),
            child: Text('黃色按鈕'),
          ),
        ),
      ]
  ),

Row(
    children: <Widget>[
         RaisedButton(
           onPressed: () {
           },
           color: const Color(0xffcc0000),
           child: new Text('紅色按鈕'),
         ),
         Expanded(
           flex: 1,
           child: RaisedButton(
             onPressed: () {
             },
             color: const Color(0xfff1c232),
             child: Text('黃色按鈕'),
           ),
         ),
       ]
   ),

Flexible:

在這里插入圖片描述

Expened:

在這里插入圖片描述

8.Stack和Positioned（層疊布局）

其childWidget 可以層疊到一起史翘，層疊順序：Widget越后創(chuàng)建必峰，層級(jí)越靠上凭需。
Positioned一般用來和Stack組件一起來使用粒蜈，用來進(jìn)行組件位置的定位枯怖。

Stack(
 children: [
     Positioned(
       left: 50,
       top: 100,
       child: Text("測(cè)試")
     )
   ],
 ),

9.頁(yè)面切換BottomNavigationBar

int _currentIndex=0;   //初始化為0
bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
   onTap: (index){
     setState(() {
       _currentIndex=index;
     });
   },
   items: [
     BottomNavigationBarItem(
         icon:Icon(
           Icons.home,
           color: Colors.grey,
         ),
         activeIcon: Icon(
           Icons.home,
           color: Colors.blue,
         ),
         title: Text('首頁(yè)'),
     ),
     BottomNavigationBarItem(
         icon: Icon(
             Icons.list,
             color: Colors.grey,
         ),
       activeIcon: Icon(
         Icons.list,
         color: Colors.blue,
       ),
       title: Text('列表'),
     )
   ],
 ),
 body: _currentIndex == 0
     ? Center(
         child: ListView(
           children: <Widget>[
             Text('首頁(yè)'),
           ],
         ),
       )
     : Text('列表'),

10.RefreshIndicator和ListView（下拉刷新）

RefreshIndicator 是 Material 風(fēng)格的滑動(dòng)刷新Widget ，效果是下拉刷新顯示的加載圓圈能曾，一般和ListView一起使用度硝，ListView和使用效果和RecycleView類型。

RefreshIndicator(
  child: ListView(
     children:<Widget> [
       Container(
         decoration: BoxDecoration(color: Colors.white),
         alignment: Alignment.center,
         child: Text("測(cè)試")
       )
     ],
   ),  
   onRefresh: _handleRefresh,  //設(shè)置延遲時(shí)間
 ),

Future<dynamic> _handleRefresh() async {
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

11.FloatingActionButton(懸浮按鈕)

FloatingActionButton(
   onPressed: null,
     child: Icon(
       Icons.add,
       size: 20,
     ),
   ),

12.Text（文本）

TextStyle textStyle = TextStyle(fontSize: 30,    //字體大小
        color:Colors.deepOrange,                     //字體顏色
        decoration: TextDecoration.lineThrough,     //設(shè)置刪除線
        decorationColor: Colors.green,          //刪除線顏色為綠色
        decorationStyle: TextDecorationStyle.wavy,      //刪除線為波浪線
        fontWeight: FontWeight.bold,                 //加粗
        fontStyle: FontStyle.italic,          //斜體
        //letterSpacing: 2.0,
       // backgroundColor: Colors.blue,   //背景顏色
       );

 Text(
       'Hello world',   //輸出內(nèi)容
       style: textStyle,    //字體格式
       //textDirection: TextDirection.ltr,
       softWrap: false,     //自動(dòng)換行
       overflow: TextOverflow.fade,  //文字超出屏幕之后的處理方式（clip裁剪寿冕，fade 漸隱蕊程，ellipsis 省略號(hào)）
       textScaleFactor: 1.0,
      )

在這里插入圖片描述

13.TextField（功能較多）

TextField是一個(gè)material design風(fēng)格的輸入框、還有裝飾器InputDecoration要有多種屬性驼唱，可以使用TextEditingController方法獲取輸入的內(nèi)容藻茂。

TextField(
     obscureText: true,       //隱藏文本
     decoration: InputDecoration(
         labelText: "請(qǐng)輸入手機(jī)號(hào)碼",      //標(biāo)簽文字
         hintText: "請(qǐng)輸入手機(jī)號(hào)碼",     //提示文字
         prefixIcon: Icon(Icons.people_alt_rounded)   //左側(cè)內(nèi)圖標(biāo)),
   ),

在這里插入圖片描述

如果想了解更多關(guān)于TextField屬性的功能臂港，可以去看一下這篇博客
https://blog.csdn.net/yechaoa/article/details/90906689

14.PageView（滑動(dòng)視圖）

PageView 是一個(gè)滑動(dòng)視圖列表。

 Container(
    height: 100,
        margin: EdgeInsets.only(top: 10),
        decoration:
        BoxDecoration(color: Colors.lightBlueAccent),
        child: PageView(
          children:<Widget> [
              _item('Page1',Colors.deepPurple), //_item為自定義私有方法
              _item('Page2',Colors.green),
              _item('Page3',Colors.red)
          ],
        ),
      )

_item(String title, Color color) {
  return Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(color: color),
    child: Text(
      title,
      style: TextStyle(fontSize: 22, color: Colors.white),
    ),
  );

上述代碼實(shí)現(xiàn)了三個(gè)不同顏色的PageView用于滑動(dòng)

在這里插入圖片描述

15.Icon（圖標(biāo)）

實(shí)現(xiàn)簡(jiǎn)單的圖片和圖標(biāo)功能乖篷。

Icon(
   Icons.access_alarm,  //系統(tǒng)自帶圖片
   size: 50,            //圖片大小
   color: Colors.red,   //圖片顏色
   ),

詳細(xì)Icon博客地址https://blog.csdn.net/yuzhiqiang_1993/article/details/85258876

16.CloseButton锅论、BackButton敬肚、IconButton（簡(jiǎn)單按鈕）

簡(jiǎn)單按鈕的實(shí)現(xiàn)

CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
RaisedButton(child:Text('結(jié)束'),onPressed: null,),

在這里插入圖片描述

17.Image（加載圖片）

可以用于加載網(wǎng)絡(luò)圖片和本地圖片

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)陆爽，

想了解更多具體的功能，可以看一下這篇博客http://www.reibang.com/p/81b1106146c4

18.chip（有趣的小組件）

Flutter一個(gè)有趣的小組件

Chip(
  avatar: Icon(Icons.people),  //左邊的圖片
  label: Text('有趣的小組件'),
  deleteIcon: Icon(Icons.remove_red_eye_outlined),  //右邊圖片
  onDeleted: ()=>print('刪除'),  //響應(yīng)事件
  ),

在這里插入圖片描述

19.Divider（分隔符）

Flutter中的分隔符布讹，起到分隔的作用

 Divider(
   height: 10,
   indent: 10,
   color: Colors.orange,
  ),

在這里插入圖片描述

20.Card（卡片式布局）

經(jīng)典的Material UI卡片式布局,設(shè)計(jì)出來的UI很有質(zhì)感睡扬。

 Card(
    color: Colors.blue,   //卡片背景色
      shadowColor: Colors.red, //陰影顏色
      elevation: 5,    //陰影高度
      margin:EdgeInsets.all(10),  //外邊距
      child: Container(   //用Container容器包裹起來
        width: 150,    
        height: 80,
        padding: EdgeInsets.all(10),   //內(nèi)邊距
        child:Column(
          children: [
            Text(
              'I am Card',        
              style: textStyle,
            ),
            Icon(
              Icons.add_a_photo,
              size: 30,
              color: Colors.orange,
            )
          ],
        )
      ),
    ),

在這里插入圖片描述

21AlertDialog（彈出框）

可以在當(dāng)前的界面上顯示一個(gè)對(duì)話框

AlertDialog(
    title: Text('耗子喂汁'),
    content: Text('大意了，沒有閃'),
  ),

在這里插入圖片描述

22.LinearGradient（顏色漸變）

實(shí)現(xiàn)顏色的漸變，一般在Container組件中使用。

 LinearGradient(
 //AppBar漸變遮罩背景
   colors: [Color(0x66000000), Colors.transparent],
   begin: Alignment.topCenter,
   end: Alignment.bottomCenter,
 ),

23.RichText（富文本）

用于將幾個(gè)Text組件組合起來焊虏，可以單獨(dú)設(shè)置每個(gè)Text的大小和顏色褥琐。

RichText(
  text: TextSpan(
      text: "登陸即視為同意",
      style: TextStyle(color: Color(0xAA333333),fontSize: 18),
      children: [
        TextSpan(
            text: "《巴樂兔服務(wù)協(xié)議》", style: TextStyle(color: Color(0xAACE1928))),
      ]),
  textDirection: TextDirection.ltr,  //TextSpan的排列方向
)

RichText組件詳細(xì)博客地址：https://blog.csdn.net/jungle_pig/article/details/95069268

24. GestureDetector(手勢(shì)監(jiān)控）

手勢(shì)監(jiān)控組件析显，一般用于單擊雙擊，長(zhǎng)按等手勢(shì)的監(jiān)控尖昏。

GestureDetector(
  onTap: () => _printMsg("點(diǎn)擊"),
  onDoubleTap: () => _printMsg("雙擊"),
  onLongPress: () => _printMsg("長(zhǎng)按"),
  onTapCancel: () => _printMsg("取消"),
  onTapUp: (e) => _printMsg("松開"),
  onTapDown: (e) => _printMsg("按下"),
  child: Container(
    decoration: BoxDecoration(color: Colors.redAccent),
    width: 100,
    height: 100,
  ),
)

手勢(shì)監(jiān)控詳細(xì)博客地址：
http://www.reibang.com/p/96ab1c189683

25.Center（組件居中)

用于把組件顯示到頁(yè)面正中間，使用起來比較簡(jiǎn)單，就不仔細(xì)說明了。

26.Opacity（透明度）

用于設(shè)置透明度

Stack(
    children: <Widget>[
      Image.network(
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
      ),
      Positioned.fill(
        child: Opacity(
          opacity: 0.5,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.white, Colors.blue],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter),
            ),
          ),
        ),
      ),
    ],
  )

Opacity詳細(xì)博客地址：
https://blog.csdn.net/mengks1987/article/details/104416468/

27.MediaQuery.removePadding(去除組件之間空格）

MediaQuery.removePadding(
            removeTop: true,
            context: context,
            child: ,
)

28.Slider（滑動(dòng)進(jìn)度條）

double _sliderValue = 0;
Slider(
    value: _sliderValue,   //當(dāng)前值
     onChanged: (v){
       setState(() {
         _sliderValue = v;
       });   //滑動(dòng)改變值
     },
   )

Slider詳細(xì)博客地址：
https://blog.csdn.net/mengks1987/article/details/108526412

29.ReorderableListView（拖拽排序組件）

ReorderableListView是通過長(zhǎng)按拖動(dòng)某一項(xiàng)到另一個(gè)位置來重新排序的列表組件。
關(guān)于這個(gè)組件的使用可以看一下這篇博客https://blog.csdn.net/mengks1987/article/details/104722644/

因?yàn)闆]寫多久铜秆，可能還有很多組件沒有考慮到惰聂，歡迎補(bǔ)充饲趋。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末拐揭，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子奕塑，更是在濱河造成了極大的恐慌堂污，老刑警劉巖，帶你破解...
沈念sama閱讀 217,542評(píng)論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件龄砰，死亡現(xiàn)場(chǎng)離奇詭異盟猖，居然都是意外死亡讨衣，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,822評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門扒披，熙熙樓的掌柜王于貴愁眉苦臉地迎上來值依，“玉大人，你說我怎么就攤上這事碟案。” “怎么了颇蜡？”我有些...
開封第一講書人閱讀 163,912評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵价说，是天一觀的道長(zhǎng)。經(jīng)常有香客問我风秤，道長(zhǎng)鳖目，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,449評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任缤弦，我火速辦了婚禮领迈，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘碍沐。我一直安慰自己狸捅，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,500評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布累提。她就那樣靜靜地躺著尘喝，像睡著了一般。火紅的嫁衣襯著肌膚如雪斋陪。梳的紋絲不亂的頭發(fā)上朽褪，一...
開封第一講書人閱讀 51,370評(píng)論 1贊 302
城市分裂傳說
那天，我揣著相機(jī)與錄音无虚，去河邊找鬼缔赠。笑死，一個(gè)胖子當(dāng)著我的面吹牛友题，可吹牛的內(nèi)容都是我干的嗤堰。我是一名探鬼主播，決...
沈念sama閱讀 40,193評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼咆爽，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼梁棠！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起斗埂，我...
開封第一講書人閱讀 39,074評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤符糊，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后呛凶，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體男娄，經(jīng)...
沈念sama閱讀 45,505評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,722評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了模闲。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片建瘫。...
茶點(diǎn)故事閱讀 39,841評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖尸折，靈堂內(nèi)的尸體忽然破棺而出啰脚，到底是詐尸還是另有隱情，我是刑警寧澤实夹，帶...
沈念sama閱讀 35,569評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布橄浓，位于F島的核電站，受9級(jí)特大地震影響亮航，放射性物質(zhì)發(fā)生泄漏荸实。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,168評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一缴淋、第九天我趴在偏房一處隱蔽的房頂上張望准给。院中可真熱鬧，春花似錦重抖、人聲如沸露氮。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,783評(píng)論 0贊 22
一樁弒父案仇哆，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)沦辙。三九已至，卻和暖如春讹剔，著一層夾襖步出監(jiān)牢的瞬間油讯，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,918評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工延欠，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陌兑，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,962評(píng)論 2贊 370
代替公主和親
正文我出身青樓由捎，卻偏偏與公主長(zhǎng)得像兔综，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子狞玛，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,781評(píng)論 2贊 354

Flutter新手入門常用組件總結(jié)运敢，讓你了解更多的Flutter組件迄沫？

Flutter新手入門常用組件總結(jié)羊瘩，讓你了解更多的Flutter組件？

1.MaterialApp

2.Scaffold

3.Container

4.BoxDecoration（裝飾器）

5.Row（橫向排布）

6.Column（縱向排布）

7.Expanded和Flexible

8.Stack和Positioned（層疊布局）

9.頁(yè)面切換BottomNavigationBar

10.RefreshIndicator和ListView（下拉刷新）

11.FloatingActionButton(懸浮按鈕)

12.Text（文本）

13.TextField（功能較多）

14.PageView（滑動(dòng)視圖）

15.Icon（圖標(biāo)）

16.CloseButton锅论、BackButton敬肚、IconButton（簡(jiǎn)單按鈕）

17.Image（加載圖片）

18.chip（有趣的小組件）

19.Divider（分隔符）

20.Card（卡片式布局）

21AlertDialog（彈出框）

22.LinearGradient（顏色漸變）

23.RichText（富文本）

24. GestureDetector(手勢(shì)監(jiān)控）

25.Center（組件居中)

26.Opacity（透明度）

27.MediaQuery.removePadding(去除組件之間空格）

28.Slider（滑動(dòng)進(jìn)度條）

29.ReorderableListView（拖拽排序組件）

推薦閱讀更多精彩內(nèi)容