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: <Widget>[
    Expanded(child: Text('主体内容1'), flex: 2,),
    Expanded(child: Text('主体内容2'), flex: 1,)
  ]
)

6.Column（纵向排布）

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

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

7.Expanded和Flexible

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

代码：

 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越后创建，层级越靠上。
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: <Widget>[
             Text('首页'),
           ],
         ),
       )
     : Text('列表'),

10.RefreshIndicator和ListView（下拉刷新）

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

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

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,     //设置删除线
        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:<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),
    ),
  );

上述代码实现了三个不同颜色的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: <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详细博客地址：
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/

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

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

1.MaterialApp

2.Scaffold

3.Container

4.BoxDecoration（装饰器）

5.Row（横向排布）

6.Column（纵向排布）

7.Expanded和Flexible

8.Stack和Positioned（层叠布局）

9.页面切换BottomNavigationBar

10.RefreshIndicator和ListView（下拉刷新）

11.FloatingActionButton(悬浮按钮)

12.Text（文本）

13.TextField（功能较多）

14.PageView（滑动视图）

15.Icon（图标）

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

17.Image（加载图片）

18.chip（有趣的小组件）

19.Divider（分隔符）

20.Card（卡片式布局）

21AlertDialog（弹出框）

22.LinearGradient（颜色渐变）

23.RichText（富文本）

24. GestureDetector(手势监控）

25.Center（组件居中)

26.Opacity（透明度）

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

28.Slider（滑动进度条）

29.ReorderableListView（拖拽排序组件）

推荐阅读更多精彩内容