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

2,650

因为学完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区域

效果: 在这里插入图片描述 参考博客地址:blog.csdn.net/qq_18948359… 如果想去了解这个组件的,可以去看一下这篇博客,说的很详细。

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的使用,可以看一下blog.csdn.net/u014112893/…非常详细。

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属性的功能,可以去看一下这篇博客 blog.csdn.net/yechaoa/art…

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博客地址blog.csdn.net/yuzhiqiang_…

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,
),

想了解更多具体的功能,可以看一下这篇博客www.jianshu.com/p/81b110614…

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组件详细博客地址:blog.csdn.net/jungle_pig/…

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,
  ),
)

手势监控详细博客地址: www.jianshu.com/p/96ab1c189…

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详细博客地址: blog.csdn.net/mengks1987/…

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

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

28.Slider(滑动进度条)

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

Slider详细博客地址: blog.csdn.net/mengks1987/…

29.ReorderableListView(拖拽排序组件)

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

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

参考博客地址: blog.csdn.net/xueshao110/… blog.csdn.net/u014112893/… blog.csdn.net/chunchun123… blog.csdn.net/qq_18948359… www.jianshu.com/p/f1b8fbe5c… blog.csdn.net/yechaoa/art… blog.csdn.net/yuzhiqiang_… www.jianshu.com/p/81b110614… blog.csdn.net/jungle_pig/… www.jianshu.com/p/96ab1c189… blog.csdn.net/mengks1987/… blog.csdn.net/mengks1987/…