Flutter 常用控件使用详解

配置

Flutter常用控件

Text

TextField组件

Container

Image

GridView

Row水平组件

Column垂直布局

Stack层叠布局

参考

配置

由于Flutter会同时构建Android和IOS两个平台的发布包，所以Flutter同时依赖Android SDK和iOS SDK，在安装Flutter时也需要安装相应平台的构建工具和SDK，在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量中，可以参考国内镜像以获得有关镜像服务器的最新动态。

export PUB_HOSTED_URL= https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn

获取FlutterSdk，可以去flutter官网下载其最新可用的安装包 FlutterSdk

运行 flutter doctor打印日志Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.25.0-8.3.pre, on Microsoft Windows [Version 10.0.17134.1967], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 4.0)
[√] VS Code (version 1.52.1)
[!] Connected device! No devices available! Doctor found issues in 2 categories.

Flutter常用控件

Text

和Android 系统中的 Text类似，主要是为了显示文本内容。

import 'package:flutter/material.dart';//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Text widget",home: Scaffold(body: Center(child: Text("Text文本内容Text文本内容Text文本内容",textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,style:TextStyle(color: Color.fromRGBO(28, 30, 120, 1),//或者 Colors.blackfontSize: 16,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid//实线) ,),),),);}}

StatefulWidget：具有可变状态的窗口部件，因状态变更可以导致UI变更的的Widget，涉及到数据渲染场景，都使用StatefulWidget。
StatelessWidget：代表只有一种状态的组件，不可变状态窗口部件，也就是无状态的变更，UI静态固化的 widget ，页面的渲染性能更高。

home：Scaffold是Material library 中提供的一个组件,我们可以在里面设置导航栏、标题和包含主屏幕widget树的body属性。可以看到这里是在页面上添加了AppBar和一个Text。
在Widget组件中都是通过build方法来描述自己的内部结构。这里的build表示构建MyApp中使用的是MaterialApp的系统组件。

常用属性

TextAlign属性：center: 文本以居中形式对齐left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。right :右对齐，使用频率也不算高。start:以开始位置进行对齐，类似于左对齐。end: 以为本结尾处进行对齐，不常用。有点类似右对齐.maxLines属性： 可以最多显示几行overflow属性：用来设置文本溢出时，如何处理clip：直接切断，剩下的文字就没有了。ellipsis:在后边显示省略号，这个在工作中经常使用。fade: 溢出的部分会进行一个渐变消失的效果。style属性：fontSize大小Color颜色fontWeight加粗之类fontFamily字体类别 类似于ios中fontName decoration 装饰字体，可以配置下划线、删除线等等，一般和 decorationStyle 配置使用，

TextField组件

文本输入框，类似于Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。

TextField(keyboardType: TextInputType.number,decoration: InputDecoration(contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.text_fields),labelText: '请输入你的姓名)',helperText: '请输入你的真实姓名',),onChanged: _textFieldChanged,autofocus: false,),void _textFieldChanged(String str) {print(str);}

增加一个keyboardType属性，把keyboardType设置为TextInputType.number可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。
然后我们为输入框做一些其他的效果，如提示文字，icon、标签文字等。我们给上面的代码新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。

onChanged是每次输入框内每次文字变更触发的回调，onSubmitted是用户提交而触发的回调。每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与 onSubmitted 用法相同。

/** Created by 李卓原 on 2018/9/7.* email: zhuoyuan93@gmail.com**/import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class TextFieldAndCheckPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => TextFieldAndCheckPageState();
}class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {//手机号的控制器TextEditingController phoneController = TextEditingController();//密码的控制器TextEditingController passController = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('输入和选择'),),body: Column(children: <Widget>[TextField(controller: phoneController,keyboardType: TextInputType.number,decoration: InputDecoration(contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.phone),labelText: '请输入你的用户名)',helperText: '请输入注册的手机号',),autofocus: false,),TextField(controller: passController,keyboardType: TextInputType.number,decoration: InputDecoration(contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.lock),labelText: '请输入密码)',),obscureText: true),RaisedButton(onPressed: _login,child: Text('登录'),),],),);}void _login() {print({'phone': phoneController.text, 'password': passController.text});if (phoneController.text.length != 11) {showDialog(context: context,builder: (context) => AlertDialog(title: Text('手机号码格式不对'),));} else if (passController.text.length == 0) {showDialog(context: context,builder: (context) => AlertDialog(title: Text('请填写密码'),));} else {showDialog(context: context,builder: (context) => AlertDialog(title: Text('登录成功'),));phoneController.clear();}}void onTextClear() {setState(() {phoneController.clear();passController.clear();});}
}

Container

Container 可让您创建矩形视觉元素。container 可以装饰为一个 BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。container类似于html中的div。

  import 'package:flutter/material.dart';//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Text widget",home: Scaffold(body: Center(child: Container(child: Text("Text文本内容Text文本内容Text文本内容",textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,style:TextStyle(color: Color.fromRGBO(28, 29, 120, 1),fontSize: 16,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid//实线) ,),alignment: Alignment.center,width: 500,height: 100,color: Colors.red,// padding: const EdgeInsets.all(10.0),padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),//内编剧margin: const EdgeInsets.all(10.0),//外边距decoration: BoxDecoration(gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]),border: Border.all(color: Colors.red,width: 2),borderRadius: BorderRadius.circular(50)), )),),);}
}

常用属性

width和height 并没有android中的 match_parent ,而是使用 MediaQuery.of(context).size.width 。

alignment属性bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。Padding 内边距 EdgeInsets.all(10.0 )标识上下左右都是10
EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB分别代表左、上、右、下decoration修饰器，主要的功能是设置背景和边框

Image

import 'package:flutter/material.dart';//3.iamge
void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Text widget",home: Scaffold(body: Center(child: ListView(children: <Widget>[Container(child: Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555747523962&di=a1c0b1b4f8561a79e5dcb4a7409b022c&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",scale: 1.0,fit: BoxFit.contain,color: Colors.greenAccent,colorBlendMode: BlendMode.darken,repeat: ImageRepeat.repeatY,),// alignment: Alignment.center,width: 500,height: 400,color: Colors.red,// padding: const EdgeInsets.all(10.0),),Container(child: Image.asset('images/apple.gif',scale: 1.0,),// padding: const EdgeInsets.all(10.0),),],)),),);}
}

Flutter中提供了一下的几种方式加载图片

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片

加载资源图片需要用到pubspec.yaml文件。如果想配置项目资源文件，就需要使用 pubspec.yaml 文件，需要把资源文件在这里声明。
比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片，图片的名称叫做 apple.gif ，那我们在pubspec.yaml文件里就要写如下代码进行声明。

assets:- images/Apr-27-2019 16-03-03.gif代码里面需要 Image.asset('images/apple.gif',scale: 1.0,fit: BoxFit.fill,)

fit属性

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的

BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

repeat图片重复

ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。

ListView

和Android 中的滑动组件 ListView 和 RecyclerView 类似。默认为竖向

import 'package:flutter/material.dart';//3.listView 相当于tableview 纵向
void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Text widget",home: Scaffold(appBar: AppBar(title: Text('listview'),),body:  ListView(children: <Widget>[ListTile(title: Text('access_time'),leading: Icon(Icons.access_time),),ListTile(leading: Icon(Icons.account_balance),title: Text('account_balance'),),new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555747523962&di=a1c0b1b4f8561a79e5dcb4a7409b022c&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png'),],),),);}
}

横向列表只需要修改属性scrollDirection属性

Axis.horizontal:横向滚动或者叫水平方向滚动。
Axis.vertical:纵向滚动或者叫垂直方向滚动。

import 'package:flutter/material.dart';//3.listView 横向 优化代码
void main() => runApp(new MyApp());/* mylist */
class Mylist extends  StatelessWidget{@overrideWidget build(BuildContext context) {return ListView(scrollDirection: Axis.horizontal,children: <Widget>[Container(width: 100,color: Colors.lightBlue,),Container(width: 100,color: Colors.red,),Container(width: 100,color: Colors.yellow,), Container(width: 100,color: Colors.lightBlue,),Container(width: 100,color: Colors.red,),Container(width: 100,color: Colors.yellow,)],);}
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Text widget",home: Scaffold(appBar: AppBar(title: Text('listview'),),body: Container(height:300 ,child: Mylist())),);}
}

GridView

使用GridView将widget放置为二维列表。 GridView提供了两个预制list，或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时，它会自动滚动。

import 'package:flutter/material.dart';//4.GridView
void main () => runApp(MyApp());class MYGridView extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.count(padding:EdgeInsets.all(2),//外部容器的边距crossAxisCount: 3,crossAxisSpacing: 10,mainAxisSpacing: 5.0,childAspectRatio: 2,children: <Widget>[Container(color: Colors.red,child: Text('小明',textAlign: TextAlign.center,),alignment: Alignment.center,  ),Container(color: Colors.red,child: Text('小明'),),Container(color: Colors.red,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.blue,child: Text('小明'),)],);}
}class MyGridView2 extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 10,mainAxisSpacing: 5.0,childAspectRatio: 0.7),children: <Widget>[Container(color: Colors.red,child: Text('小明',textAlign: TextAlign.center,),alignment: Alignment.center,  ),Container(color: Colors.red,child: Text('小明'),),Container(color: Colors.red,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.yellow,child: Text('小明'),),Container(color: Colors.blue,child: Text('小明'),)],);}
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "GridView",home: Scaffold(appBar: AppBar(title: Text('GridView') ,),body:MyGridView2()),);}}

常用属性

GridView.count 允许您指定列数
GridView.extent 允许您指定项的最大像素宽度
padding:表示内边距，
crossAxisCount:网格的列数，相当于一行放置的网格数量。
crossAxisSpacing:表示每个网格横向之间的间距。
mainAxisSpacing:表示网格纵向的间隔
scrollDirection:类似于ListView也可以设置方向。不过方向变了只会，相应的crossAxisSpacing和mainAxisSpacing对调一下
childAspectRatio:宽高比，这个值的意思是宽是高的多少倍，如：2.0表示款式高的2倍。

Row水平组件

和Android 中的 LinearLayout 很类似

import 'package:flutter/material.dart';//6.Row
void main() => runApp(MyApp());class MyRow extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Row(children: <Widget>[// Expanded会把平分占用的空间。Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.redAccent,child:  Text('红色按钮'))),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.yellow,child:  Text('黄色按钮'))),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.blueAccent,child:  Text('蓝色按钮'))),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.greenAccent,child: new Text('绿色按钮')))],);}
}//第一列按照大小 剩下的平均
class MyRow1 extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Row(children: <Widget>[RaisedButton(onPressed: () {print('点击');},color: Colors.redAccent,child:  Text('红色按钮hahhahh')),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.yellow,child:  Text('黄色按钮'))),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.blueAccent,child:  Text('蓝色按钮'))),Expanded(child: RaisedButton(onPressed: () {print('点击');},color: Colors.pink,child:  Text('红色按钮')))],);}
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "GridView",home: Scaffold(appBar: AppBar(title: Text('Row横向布局'),),body: MyRow()),);}
}

Column垂直布局

相对于 Row 是垂直方向的组件

import 'package:flutter/material.dart';//6.Column
void main() => runApp(MyApp());class MyColumn extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Column(crossAxisAlignment: CrossAxisAlignment.start, //副轴mainAxisAlignment: MainAxisAlignment.center, //主轴children: <Widget>[Container(color: Colors.redAccent,height: 60,width: MediaQuery.of(context).size.width,child: Text('yyy，哈哈哈')),Container(color: Colors.blue, child: Text('这里是垂直布局'),width: MediaQuery.of(context).size.width,),Container(color: Colors.yellowAccent, child: Text('在家里自习'),width: MediaQuery.of(context).size.width)],);}
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Column纵向布局1",home: Scaffold(appBar: AppBar(title: Text('Column纵向布局'),),body:  MyColumn()),);}
}s

MediaQuery.of(context).size.width表示屏幕的宽度 MediaQuery.of(context).size.height 表示屏幕的高度

主轴和副轴的区别

main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。
cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。

enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}

Stack层叠布局

用于与另一个widget重叠的widget
子列表中的第一个widget是base widget; 随后的子widget被覆盖在基础widget的顶部
Stack的内容不能滚动
您可以选择剪切超过渲染框的子项

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var myStack = Stack(alignment: const FractionalOffset(0.5, 0.8),children: <Widget>[CircleAvatar(backgroundColor: Colors.redAccent,radius: 100,),Container(decoration: new BoxDecoration(color: Colors.lightBlue,),padding: EdgeInsets.all(5.0),child: new Text('小明'),)],);return MaterialApp(title: "stack布局",home: Scaffold(appBar: AppBar(title: Text('stack布局'),),// body: Center(child: Mystack1())),body: Center(child: myStack)),);}
}

Positioned组件的属性

bottom: 距离层叠组件下边的距离
left：距离层叠组件左边的距离
top：距离层叠组件上边的距离
right：距离层叠组件右边的距离
width: 层叠定位组件的宽度
height: 层叠定位组件的高度

作者：锦鲤跃龙
链接：https://www.jianshu.com/p/101d943f71fc
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考

Flutter中文网

Flutter 常用控件使用详解相关推荐

C#Winform的DataGridView控件使用详解1—七种DataGridViewColumn类型使用方法
C#Winform的DataGridView控件使用详解1-七种DataGridViewColumn类型使用方法 DataGirdView控件Column类型 DataGridViewButtonCo ...
android控件使用大全,Android常见控件使用详解
本文实例为大家分享了六种Android常见控件的使用方法,供大家参考,具体内容如下 1.TextView 主要用于界面上显示一段文本信息 2.Button 用于和用户交互的一个按钮控件 //为Butt ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
C#Winform的DataGridView控件使用详解2—DataGridView表格样式设置及表格操作
C#Winform的DataGridView控件使用详解2-DataGridView表格样式设置及表格操作 DataGridView表格样式设置 DataGridView行序号设置右键弹出控件表格操 ...
QT QLabel控件(使用详解)
本文详细的介绍了TextLabel控件的各种操作,例如:显示边框.设置文字.设置字体.设置信息提示框.状态提示.居中对齐.加载图片.自适应图片大小.设置位置大小.样式表等操作. 本文作者原创,转载请附 ...
QT QTabWidget 控件使用详解
本文详细的介绍了QTabWidget控件的各种操作,例如:新建界面.设置页面名字.设置提示信息.设置页面激活.设置标题栏位置.设置页面关闭按钮.设置页面关闭按钮.获取页面下标.获取页面总数.清空所有页 ...
VB6.0 ActiveX 控件开发详解 [第一章：创建工程]
前言在CSDN的VB论坛上,我总是能够看见有人这样问"有没有这样的控件,一个列表框,每一个项前面有一个按钮"(这是例子),又或者见到这样:"怎么样做一个ActiveX控 ...
QT QSpinBox 整数计数器控件使用详解
本文详细的介绍了QSpinBox控件的各种操作,例如:获取数值.设置前后缀.设置最大/小值.进制转换.关联信号槽.优化信号.QSS优化.文件源码.样式表 .效果:可以设置背景.边框.向上按钮.向下按钮 ...
android gridview控件使用详解_作为Android 开发者该如何进阶？
经常在简书和微信上收到一些同学的私信,说自己马上毕业或者已经毕业一年,从事Android开发相关的工作,现在不知道要学习什么东西了.或者说自己也在摸索着学习,但是不知道学习的路线对不对,感觉很迷茫,想 ...

Flutter 常用控件使用详解

配置

Flutter常用控件

Text

TextField组件

Container

Image

GridView

Row水平组件

Column垂直布局

Stack层叠布局

参考

Flutter 常用控件使用详解相关推荐

最新文章

热门文章