Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget。
大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码。
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: _buildWidget(),),),);}Widget _buildWidget() {//TODO}}复制代码
目录
1. Text
1)基本使用
return Text('Show Regular Text');
复制代码
2)设置字体样式
属性:style
设置粗体:
return Text('Show Bold Text',style: TextStyle(fontWeight: FontWeight.bold),);
复制代码
设置颜色:
return Text('Show Bold Red Text',style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),);
复制代码
其他样式相信大家学习过之前的文章,知道如何查看一个 Widget 源码以及如何使用了。
3)设置最大行数及省略号
属性:maxLines、overflow
return Container(width: 100,child: Text('设置文本超过 100,这样能够看到效果,这里设置最多显示一行',maxLines: 1, //设置最大行数overflow: TextOverflow.ellipsis, //设置超过显示省略号),);
复制代码
大概效果如下:
2. Image
1)本地加载图片
第一步:创建放置图片的文件夹,这里假设我们在 my_flutter 下面创建 assets/images/2.0x 和 assets/images/3.0x 文件夹用于存放本地图片。
第二步:拷贝图片 wechat.png 到上述文件夹,一般如果切图是用 sketch,则直接选择对应的 2 倍图和 3 倍图。
第三步:在 pubspec.yaml 文件确定要使用的图片资源位置。这里可以定义如下:
assets:- assets/images/wechat.png
复制代码
第四步:使用如下。
return Image.asset('assets/images/wechat.png')
复制代码
可能有小伙伴会觉得,如果我有很多图片需要使用,是不是每次执行第三步和第四步的时候都要写那么长的路径。
先说下第四步,如果你都是同个目录,只是最后图片名称不一样。那么你可以自定义一个包装类做一层包装。
接着我们来说下第三步的情况。
假设你有很多图片在同一个文件夹下面,那么你是可以在 pubspec.yaml 里面使用目录定义的。但是,注意官方文档的一句话:
Note that only files located directly in the directory will be included; to add files located in subdirectories, create an entry per directory.
简单的说就是你使用的目录要到最底层,也就是这个目录下面就是图片而不是目录了。
举我们这个例子就是如果你要用目录定义及使用,上面第三步替换为
assets:- assets/images/2.0x/
复制代码
第四步替换为
return Image.asset('assets/images/2.0x/wechat.png');
复制代码
可以看到这样我们如果一张图片要适配不同尺寸估计就不是很合适了。
因此对于有适配场景的,其实推荐第一种直接配置指定图片的方式。
温馨提示:
修改 pubspec.yaml 文件之后建议运行之前增加清理工作。
比如之前是执行 flutter run
修改之后建议执行 flutter packages get;flutter clean;flutter run
上面定义的位置可以直接在 pubspec.yaml 文件搜索 assets,有注释讲解的位置就是你要添加的位置了。
官网:
https://flutter.dev/docs/development/ui/assets-and-images#loading-images
2)网络加载图片
给定一个图片 url,执行下面代码即可:
return Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875');
复制代码
3)指定宽高
指定宽高是直接使用 width 和 height 属性。
比如网络加载图片指定宽高如下:
return Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,);
复制代码
大致效果如下:
3. Column
前面两个讲的都是单个小组件。接下来我们讲的是类似于布局的组件。(还是组件,毕竟 Flutter 一切皆 Widget)
1)基本使用
大家看到这个词,应该会直观认为这个就是对于一些布局为列的场景吧,可能有多列,然而不是哦。
点进去源码可以看到如下注释:
/// Creates a vertical array of children.
复制代码
大概意思是创建一组垂直的子组件集合。
如果你是 Android 开发,可以联想到 LinearLayout 里面的 orientation 设置为 vertical 时的布局。
如下:
你也可以这样记忆,Column 是列,说明布局只有一列。所以就是上面这种了。
所以上面的 Text 效果图和 Image 效果图应该就知道是如何显示了吧?
我们这里给下示例代码,当然如果你是用带刘海屏的设备运行,可能顶部会看不到。后面我们会继续说明。
return Column(children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
效果如下:
写法也很简单,就是设置一下 children 属性就可以了。
然后里面的 Widget 数组填充我们要展示的 Widget 即可。
上面说了刘海屏设备顶部会看不到,那怎么办?
2)mainAxisAlignment
mainAxisAlignment 你可以认为是主轴的对齐方式。对于竖直的 Column,那就是竖直方向的对齐。
影响整个 Column
因此可以设置如下:
return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
你就会发现整个 Column 在竖直方向都居中了。
3)crossAxisAlignment
crossAxisAlignment 你可以认为是交叉轴的对齐方式,对于竖直的 Column,那就是水平方向的对齐。
影响 Column 里面的每一个 Widget
设置如下:
return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.end,children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
你会发现原本最后一张居中的图片在水平方向向右边对齐。
4. Row
1)基本使用
/// Creates a horizontal array of children.
复制代码
大概意思是创建一组水平的子组件集合,可以联想到 LinearLayout 里面的 orientation 设置为 horizontal 时的布局。
也可以记忆为 Row 代表行,因此只有一行。
如下:
Sample:
return Row(children: <Widget>[Text('Widget One', style: TextStyle(color: Colors.blue),),Text('Widget Two'),],);
复制代码
效果如下:
可以看到只有一行,所以使用 Row。
写法也是比较简单,就是设置一下 children 属性就可以了。
然后里面的 Widget 数组填充我们要展示的 Widget 即可。
2)mainAxisAlignment
mainAxisAlignment 你可以认为是主轴的对齐方式,对于水平的 Row,那就是水平方向的对齐。
影响整个 Row
因此可以设置如下:
return Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Widget One', style: TextStyle(color: Colors.blue),),Text('Widget Two'),],);
复制代码
这样效果显示就是上图居中。
3)crossAxisAlignment
crossAxisAlignment 你可以认为是交叉轴的对齐方式,对于水平的 Row,那就是竖直方向的对齐。
影响 Row 里面的每一个 Widget
设置如下:(这里引入了一个后面才会讲到的 Widget,大家可以暂时不理,看下效果)
return Container(width: 300,height: 300,color: Colors.grey,child: Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.end,children: <Widget>[Container(width: 100,height: 100,color: Colors.blue,child: Text('Widget One',),),Container(width: 100,height: 100,color: Colors.yellow,child: Text('Widget Two',),),],),);
复制代码
灰色是我们的父容器,可以看到两个控件水平方面居中,竖直方面向下对齐。
5. Container
Container 的使用超级广泛。
我们这里略微讲一下一些使用场景。
1)给一些没有自带宽高的属性设置宽高。
比如我们上面讲到 Row 最后一个 Sample 的时候,给 Text、Row 设置宽高都是在外面套一层 Container。
- 设置间距。
以上面 Column 的三张图片为例,他们一开始是下面代码:
return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
效果如下:
我们希望第一张和第二张图片有点距离,可以这样设置:
return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),Container(padding: EdgeInsets.only(top: 20.0),child: Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
效果如下:
我们代码里面使用 Container 都是把 Widget 拿出来作为 Container 的 child。
这里的 padding 使用有三种常用写法:
第一种:上下左右 padding 的值都一样
源码:
const EdgeInsets.all(double value): left = value, top = value, right = value, bottom = value;
复制代码
第二种:上下左右 padding 不一致或者只想设置某一个或某几个方向
源码:
const EdgeInsets.only({this.left = 0.0,this.top = 0.0,this.right = 0.0,this.bottom = 0.0});
复制代码
第三种:设置水平或者垂直方向的 padding
源码:
const EdgeInsets.symmetric({ double vertical = 0.0,double horizontal = 0.0 }): left = horizontal, top = vertical, right = horizontal, bottom = vertical;
复制代码
相信现在给出源码,大家都知道怎么写了。
记得花括号是可选参数哈~
Sample:
padding: EdgeInsets.all(left : 20.0),padding: EdgeInsets.only(left : 20.0),padding: EdgeInsets.symmetric(horizontal : 20.0),
复制代码
margin 和 padding 也是类似的,区别相信学过 Android 的都知道,你也可以自己测试一下区别,这里就不赘余了。
另外注意 Container 源码有个注释:
/// The `height` and `width` values include the padding.
复制代码
举个例子就是假设有一张图片宽 100,假设你左右预留 padding 10,那么你宽需要设置为 120。
6. SizedBox
你可以用来替换需要套一层 Container 来设置 margin 或者 padding 的 Widget。
比如上面的代码
return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),Container(padding: EdgeInsets.only(top: 20.0),child: Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
可以等效替换为
return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),SizedBox(height: 20.0,),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875',width: 300,height: 200,)],);
复制代码
将
Container(padding: EdgeInsets.only(top: 20.0),child: Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),),
复制代码
替换成了
SizedBox(height: 20.0,),Image.network('https://user-gold-cdn.xitu.io/2019/3/4/169466d552919d6c?w=1240&h=677&f=jpeg&s=162875'),
复制代码
当然这里由于 Widget 没有限制宽高,所以 padding 或者 margin 在这里起到一样作用。
严格来说 SizedBox 应该是替换 margin。替换 padding 需要注意上面说的宽高影响。
常用的 Widget 我们就介绍到这里。
其他的我们后续再介绍或者大家自行查阅官网 Widget 集合。
相信现在的你可以根据官网的 Sample 和说明以及亲自测试快速掌握新 Widget 的使用。
官网 Widget 集合:
https://flutter.dev/docs/development/ui/widgets
更多阅读:
Flutter 即学即用系列博客——01 环境搭建
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
Flutter 即学即用系列博客——04 Flutter UI 初窥
Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
Flutter 即学即用系列博客——06 超实用 Widget 集锦相关推荐
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- flutter 返回指定界面_Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- flutter text 自动换行_Flutter 系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- LINQ之路系列博客后记
缘起 今年3月,我换了工作单位.后来多次收到公司的新人培训邮件,不过对此我并不感冒,说实话并不喜欢这种活动.印象中,新人培训无非是唠叨些公司的规章制度.侃述一下公司的光辉历史还有灿烂的未来发展等等.规 ...
- 堪比培训机构的MySQL系列博客
这个blog,我整理了我之前写的MySQL开发系列和MySQL运维系列,知识丰富程度堪比培训机构 个人能力有限,如有错误的地方,欢迎指正. 文章目录 一.MySQL开发系列 1.1 MySQL 行转列 ...
- Python Web企业门户网站—系列博客教程介绍
本系列教程将使用Python Web的Django框架实现企业门户网站的制作.本教程一共分为8篇博文,将从最基础的Python语法讲起,然后使用Django3逐步搭建一个完整的企业门户网站项目实例.如 ...
- SpringCloud系列博客父工程xml依赖
SpringCloud系列博客父工程xml依赖 <?xml version="1.0" encoding="UTF-8"?><project ...
- 大数据系列博客之 --- 深入简出 Shell 脚本语言(提升篇)
首先声明,此系列shell系列博客分为四篇发布,分别是: 基础篇:https://www.cnblogs.com/lsy131479/p/9914747.html 提升篇:https://www.cn ...
- Django 系列博客(十一)
Django 系列博客(十一) 前言 本篇博客介绍使用 ORM 来进行多表的操作,当然重点在查询方面. 创建表 实例: 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日 ...
- Django 系列博客(二)
Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客 ...
最新文章
- 这三类问题是工控系统最大的威胁
- SpringBoot入门和配置
- vue双击事件_我总结了12个Vue.js开发技巧和窍门
- man da'te
- SAP Spartacus cxFocus单元测试Expected null to equal -1的错误分析
- Linux-(C/C++)动态链接库生成以及使用(libxxx.so)
- 监督学习和无监督学习_一篇文章区分监督学习、无监督学习和强化学习
- 如何修改zblog的css,修改Zblog中的CSS的方法
- 团队作业4——第一次项目冲刺(Alpha版本)
- HDU1880 魔咒词典【文本处理】
- 下载Android kernel
- mysql省市县表设计_表设计(省市县)
- 《白夜行》读后感:白夜行走,暗中羁绊
- MC9S12XS128nbsp;16位PWMnbsp;电…
- JAVA练习题17:文字版格斗游戏
- Launcher启动流程及初始化
- 工程制图点的投影练习
- javac的命令(-Xbootclasspath、-classpath与-sourcepath等)
- FTP文件传输协议原理详解(两种工作模式)
- 评分员间可信度与Kappa统计量 Inter-rater reliability Kappa statistics
热门文章
- 机器学习:更多的数据总是优于更好的算法吗?
- 一个有趣的.net程序死锁问题
- 删除百度贴吧上的内容
- iOS “项目名” has conflicting provisioning settings.
- BZOJ1001 狼抓兔子(网络流转最短路:对偶图)
- BZOJ 1715: [Usaco2006 Dec]Wormholes 虫洞 DFS版SPFA判负环
- 2018.12.2 中国石油大学第一次新生训练赛题解
- Shell脚本查询进程存活信息
- 微信小程序picker空白
- poj 2065 SETI(gauss---≡)