Flutter新手入门常用组件总结，让你了解更多的Flutter组件？

因为学完flutter之后，感觉对一些组件的使用不是很熟悉，记录一些巩固一下知识，组件过多，我不会写的非常详细，而且如果你不是很熟悉这些软件有那些功能的话，你可以点进去看这个组件的源码，都是用dart语言编写，看起来也比较轻松，但是我会把关于那个组件详细博客的地址链接放出来，以便日后的学习和查询，使用组件的时候，直接套娃就行。

1.MaterialApp

 MaterialApp(
      title: 'Flutter Demo', // 指定应用程序在任务栏上显示的标题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),       // 配置应用程序的主题
      home: Center(
        child: Text("MaterialApp"),
      )   // 指定应用程序的主界面
    );

2.Scaffold

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。

Scaffold(
        appBar: AppBar(
          title: Text('页面标题'),
        ),//头部导航条区域
        body: Center(
          child: Text('主体内容'),
        ),//页面主题内容区域
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),//右下角浮动按钮区域
        drawer: Drawer(),   //侧边栏抽屉区域
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon:Icon(
                Icons.home,
                color: Colors.grey,
              ),
              activeIcon: Icon(
                Icons.home,
                color: Colors.blue,
              ),
              title: Text('首页'),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.list,
                color: Colors.grey,
              ),
              activeIcon: Icon(
                Icons.list,
                color: Colors.blue,
              ),
              title: Text('列表'),
            )
          ],
        ),
      ),//底部tabBar区域

效果：

在这里插入图片描述

参考博客地址：https://blog.csdn.net/qq_18948359/article/details/82181475
如果想去了解这个组件的，可以去看一下这篇博客，说的很详细。

3.Container

Container(
        width: 200,  //宽度
        height: 200,  //长度
        child: Text("不错"),  //子组件
        decoration: BoxDecoration(
          color: Colors.blue,
        ),   //装饰器
        padding: EdgeInsets.all(10),   //内容距离盒子边界的距离
        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,
        )),   //设置边框
       ),
   )
 )

关于BoxDecoration的使用，可以看一下https://blog.csdn.net/u014112893/article/details/107819564非常详细。

5.Row（横向排布）

使内部的 children 子元素横向布局。

Row(
  children: [
    Expanded(child: Text('主体内容1'), flex: 2,),
    Expanded(child: Text('主体内容2'), flex: 1,)
  ]
)

6.Column（纵向排布）

使内部的 children 子元素纵向布局

Column(
   children: [
     Expanded(child: Text('主体内容1'), flex: 2,),
     Expanded(child: Text('主体内容2'), flex: 1,)
   ]
),

7.Expanded和Flexible

两个功能相似，区别是Flexible不会空白区域自动填充

代码：

 Row(
     children: [
        RaisedButton(
          onPressed: () {
          },
          color: const Color(0xffcc0000),
          child: new Text('红色按钮'),
        ),
        Flexible(
          flex: 1,
          child: RaisedButton(
            onPressed: () {
            },
            color: const Color(0xfff1c232),
            child: Text('黄色按钮'),
          ),
        ),
      ]
  ),

Row(
    children: [
         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越后创建，层级越靠上。
Positioned一般用来和Stack组件一起来使用，用来进行组件位置的定位。

Stack(
 children: [
     Positioned(
       left: 50,
       top: 100,
       child: Text("测试")
     )
   ],
 ),

9.页面切换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('首页'),
     ),
     BottomNavigationBarItem(
         icon: Icon(
             Icons.list,
             color: Colors.grey,
         ),
       activeIcon: Icon(
         Icons.list,
         color: Colors.blue,
       ),
       title: Text('列表'),
     )
   ],
 ),
 body: _currentIndex == 0
     ? Center(
         child: ListView(
           children: [
             Text('首页'),
           ],
         ),
       )
     : Text('列表'),

10.RefreshIndicator和ListView（下拉刷新）

RefreshIndicator 是 Material 风格的滑动刷新Widget ，效果是下拉刷新显示的加载圆圈，一般和ListView一起使用，ListView和使用效果和RecycleView类型。

RefreshIndicator(
  child: ListView(
     children: [
       Container(
         decoration: BoxDecoration(color: Colors.white),
         alignment: Alignment.center,
         child: Text("测试")
       )
     ],
   ),  
   onRefresh: _handleRefresh,  //设置延迟时间
 ),

Future _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,     //设置删除线
        decorationColor: Colors.green,          //删除线颜色为绿色
        decorationStyle: TextDecorationStyle.wavy,      //删除线为波浪线
        fontWeight: FontWeight.bold,                 //加粗
        fontStyle: FontStyle.italic,          //斜体
        //letterSpacing: 2.0,
       // backgroundColor: Colors.blue,   //背景颜色
       );

 Text(
       'Hello world',   //输出内容
       style: textStyle,    //字体格式
       //textDirection: TextDirection.ltr,
       softWrap: false,     //自动换行
       overflow: TextOverflow.fade,  //文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）
       textScaleFactor: 1.0,
      )

在这里插入图片描述

13.TextField（功能较多）

TextField是一个material design风格的输入框、还有装饰器InputDecoration要有多种属性，可以使用TextEditingController方法获取输入的内容。

TextField(
     obscureText: true,       //隐藏文本
     decoration: InputDecoration(
         labelText: "请输入手机号码",      //标签文字
         hintText: "请输入手机号码",     //提示文字
         prefixIcon: Icon(Icons.people_alt_rounded)   //左侧内图标),
   ),

在这里插入图片描述

如果想了解更多关于TextField属性的功能，可以去看一下这篇博客
https://blog.csdn.net/yechaoa/article/details/90906689

14.PageView（滑动视图）

PageView 是一个滑动视图列表。

 Container(
    height: 100,
        margin: EdgeInsets.only(top: 10),
        decoration:
        BoxDecoration(color: Colors.lightBlueAccent),
        child: PageView(
          children: [
              _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),
    ),
  );

上述代码实现了三个不同颜色的PageView用于滑动

在这里插入图片描述

15.Icon（图标）

实现简单的图片和图标功能。

Icon(
   Icons.access_alarm,  //系统自带图片
   size: 50,            //图片大小
   color: Colors.red,   //图片颜色
   ),

详细Icon博客地址https://blog.csdn.net/yuzhiqiang_1993/article/details/85258876

16.CloseButton、BackButton、IconButton（简单按钮）

简单按钮的实现

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

在这里插入图片描述

17.Image（加载图片）

可以用于加载网络图片和本地图片

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

想了解更多具体的功能，可以看一下这篇博客https://www.jianshu.com/p/81b1106146c4

18.chip（有趣的小组件）

Flutter一个有趣的小组件

Chip(
  avatar: Icon(Icons.people),  //左边的图片
  label: Text('有趣的小组件'),
  deleteIcon: Icon(Icons.remove_red_eye_outlined),  //右边图片
  onDeleted: ()=>print('删除'),  //响应事件
  ),

在这里插入图片描述

19.Divider（分隔符）

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

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

在这里插入图片描述

20.Card（卡片式布局）

经典的Material UI卡片式布局,设计出来的UI很有质感。

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

在这里插入图片描述

21AlertDialog（弹出框）

可以在当前的界面上显示一个对话框

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

在这里插入图片描述

22.LinearGradient（颜色渐变）

实现颜色的渐变，一般在Container组件中使用。

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

23.RichText（富文本）

用于将几个Text组件组合起来，可以单独设置每个Text的大小和颜色。

RichText(
  text: TextSpan(
      text: "登陆即视为同意",
      style: TextStyle(color: Color(0xAA333333),fontSize: 18),
      children: [
        TextSpan(
            text: "《巴乐兔服务协议》", style: TextStyle(color: Color(0xAACE1928))),
      ]),
  textDirection: TextDirection.ltr,  //TextSpan的排列方向
)

RichText组件详细博客地址：https://blog.csdn.net/jungle_pig/article/details/95069268

24. GestureDetector(手势监控）

手势监控组件，一般用于单击双击，长按等手势的监控。

GestureDetector(
  onTap: () => _printMsg("点击"),
  onDoubleTap: () => _printMsg("双击"),
  onLongPress: () => _printMsg("长按"),
  onTapCancel: () => _printMsg("取消"),
  onTapUp: (e) => _printMsg("松开"),
  onTapDown: (e) => _printMsg("按下"),
  child: Container(
    decoration: BoxDecoration(color: Colors.redAccent),
    width: 100,
    height: 100,
  ),
)

手势监控详细博客地址：
https://www.jianshu.com/p/96ab1c189683

25.Center（组件居中)

用于把组件显示到页面正中间，使用起来比较简单，就不仔细说明了。

26.Opacity（透明度）

用于设置透明度

Stack(
    children: [
      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详细博客地址：
https://blog.csdn.net/mengks1987/article/details/104416468/

27.MediaQuery.removePadding(去除组件之间空格）

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

28.Slider（滑动进度条）

double _sliderValue = 0;
Slider(
    value: _sliderValue,   //当前值
     onChanged: (v){
       setState(() {
         _sliderValue = v;
       });   //滑动改变值
     },
   )

Slider详细博客地址：
https://blog.csdn.net/mengks1987/article/details/108526412

29.ReorderableListView（拖拽排序组件）

ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。
关于这个组件的使用可以看一下这篇博客https://blog.csdn.net/mengks1987/article/details/104722644/

因为没写多久，可能还有很多组件没有考虑到，欢迎补充。

参考博客地址：
https://blog.csdn.net/xueshao110/article/details/90726976
https://blog.csdn.net/u014112893/article/details/107819564
https://blog.csdn.net/chunchun1230/article/details/82460257
https://blog.csdn.net/qq_18948359/article/details/82181475
https://www.jianshu.com/p/f1b8fbe5cda0?utm_source=desktop&utm_medium=timeline
https://blog.csdn.net/yechaoa/article/details/90906689
https://blog.csdn.net/yuzhiqiang_1993/article/details/85258876
https://www.jianshu.com/p/81b1106146c4
https://blog.csdn.net/jungle_pig/article/details/95069268
https://www.jianshu.com/p/96ab1c189683
https://blog.csdn.net/mengks1987/article/details/104416468/
https://blog.csdn.net/mengks1987/article/details/108526412