Flutter - 常见的基础Widget
wptr33 2024-12-05 17:00 16 浏览
一、文本 Widget
1、纯文本(Text)
Text 控件常见属性:
- textAlign: 文本对齐,默认是左对齐,可以根据实际情况修改为居中(TextAlign.center)或右对齐(TextAlign.right)
- maxLines: 文字最多显示多少行,通常与 overflow 搭配使用
- overflow: 内容溢出显示效果,可以设置显示省略号(TextOverflow.ellipsis)
- textScaleFactor: 缩放因子,默认是 1。
- style: 文本样式,直接使用 TextStyle():
- fontSize: 文字大小
- color: 文字颜色
- fontWeight: 文字粗细
/// Text的使用Demo
class TextWidgetDemo extends StatelessWidget {
final textContent = "《定风波》 苏轼 \n莫听穿林打叶声,何妨吟啸且徐行。\n竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。\n";
// final textContent = "《定风波》 苏轼 莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。";
@override
Widget build(BuildContext context) {
return Text(
textContent,
// 默认情况下,Text是包裹文字的,文字内容太少时可能看不出效果
textAlign: TextAlign.center,
// 文字最多显示2行
maxLines: 3,
// 文字超过2行时,显示...
overflow: TextOverflow.ellipsis,
// 缩放因子,默认是1
textScaleFactor: 1,
style: TextStyle(
fontSize: 30,
color: Colors.red,
fontWeight: FontWeight.bold, // 字体加粗
),
);
}
}
注意:Text 并不是最终渲染的 Widget,最终渲染的是 RichText。Text 的父类是 StatelessWidget,最终渲染的 Widget 是 build()方法创建出来的 RenderObjectWidget,即 RichText。
2、富文本(Text.rich())
Text.rich() 有一个必须参数 InlineSpan textSpan,InlineSpan 是抽象类且无工厂构造函数,无法直接创建,故需要使用其子类:
- TextSpan : 用于构建纯文本的 Span
- WidgetSpan : 用于构建内嵌 Widget 的 Span (比如:Icon)
/// Text.rich()的使用Demo
class TextRichDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text.rich(
TextSpan(
// text: "Hello lqr",
// style: TextStyle(color: Colors.red,fontSize: 20),
children: [
TextSpan(text: "Hello World", style: TextStyle(color: Colors.red)),
TextSpan(
text: "Hello Flutter", style: TextStyle(color: Colors.green)),
WidgetSpan(child: Icon(Icons.favorite, color: Colors.red)),
TextSpan(text: "Hello Dart", style: TextStyle(color: Colors.blue)),
],
),
style: TextStyle(fontSize: 26),
);
}
}
二、按钮 Widget
1、常见 Button
- RaisedButton : 突出的 Button(从 v1.25.0 过时,推荐使用 ElevatedButton)
- FlatButton : 扁平的 Button(从 v1.25.0 过时,推荐使用 TextButton)
- OutlineButton : 边框 Button(从 v1.25.0 过时,推荐使用 OutlinedButton)
- FloatingActionButton : 浮动按钮,简称 FAB,一般用在 Scaffold 中
- floatingActionButtonLocation : 可指定 FAB 在界面中的位置,比如底部居中: FloatingActionButtonLocation.centerFloat
在使用这些常见 Widget 时,经常会看到构造方法中有两类 "必传"参数:
必传参数 : 指的是 Dart 语法中方法的必传参数,这种参数不传一定报错(编译不通过)。
required 参数 : 使用 @required(或 required 关键字)修饰的 可选参数,这种不传编译可以通过,但是会报警告。
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("基础Widget")),
body: HomeContent(),
// 4. FloatingActionButton
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => print("FloatingActionButton Click"),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
...
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
// 1. 突出的Button(从 v1.25.0 过时,推荐使用 ElevatedButton)
RaisedButton(
child: Text("RaisedButton"),
textColor: Colors.red, // 文字颜色(也可以在Text的style中设置)
color: Colors.blue, // 按钮背景色
onPressed: () => print("RaisedButton Click"),
),
// 2. 扁平的Button(从 v1.25.0 过时,推荐使用 TextButton)
FlatButton(
child: Text("FlatButton"),
color: Colors.orange,
onPressed: () => print("FlatButton Click"),
),
// 3. 边框Button(从 v1.25.0 过时,推荐使用 OutlinedButton)
OutlineButton(
child: Text("OutlineButton"),
onPressed: () => print("OutlineButton Click")),
// 4. FloatingActionButton,一般用在Scaffold中
// FloatingActionButton(onPressed: onPressed)
// 5. 自定义Button:图标-文字-背景-圆角
FlatButton(
color: Colors.amberAccent,
shape: RoundedRectangleBorder( // 圆角
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min, // 默认是max,占满父Widget;min是包裹内容
children: [
Icon(Icons.favorite, color: Colors.red), // 图标
Text("喜欢作者"), // 文字
],
),
onPressed: () => print("自定义Button"), // onPressed必传,否则样式可能会出问题
)
],
);
}
}
2、定制 Button
- 默认间隔 : 默认情况下 Button 上下有一定有间隔,可以指定 materialTapTargetSize 来修改
- MaterialTapTargetSize.padded:(默认值) 当按钮宽(或高)不足 48px 时,就把宽(或高)扩展到 48px
- MaterialTapTargetSize.shrinkWrap:紧缩包裹,可以去除上下的间隔
- 最小宽度 : ButtonTheme(也是个 Widget,包裹 Button) 或 minWidth(Button 的一个属性)
- 内间距 : 修改 padding 属性值
class ButtonExtensionDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
/// 1. 默认情况下Button上下有一定有间隔
/// MaterialTapTargetSize.padded:当按钮宽(或高)不足48px时,就把宽(或高)扩展到48px。
/// MaterialTapTargetSize.shrinkWrap:紧缩包裹,可以去除上下的间隔。
FlatButton(
color: Colors.red,
child: Text("Flat Button1"),
textColor: Colors.white,
onPressed: () {},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
FlatButton(
color: Colors.red,
child: Text("Flat Button2"),
textColor: Colors.white,
onPressed: () {},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
/// 2. 修改按钮的最小宽度:ButtonTheme
FlatButton(
minWidth: 30,
height: 30,
color: Colors.red,
child: Text(""),
onPressed: () {},
),
ButtonTheme(
minWidth: 30,
height: 30,
child: FlatButton(
color: Colors.red,
child: Text(""),
onPressed: () {},
),
),
/// 3. 修改按钮的内间距
FlatButton(
padding: EdgeInsets.all(0),
// 只能去除左右内间距,上下内间距可以指定一个固定height解决
color: Colors.red,
child: Text("Float Button3"),
textColor: Colors.white,
onPressed: () {},
),
],
);
}
}
三、图片 Widget
Image 控件需要一个必传参数 ImageProvider image,常见子类如下:
- NetworkImage : 用于加载网络图片
- 简单写法 : Image.network('http://lqr.com/FSA_QR.png')
- AssetImage : 用于加载 app 包内图片
- 简单写法 : Image.asset('assets/images/FSA_QR.png')
1、NetworkImage
- 常见属性:
- Alignment.bottomCenter : 底部居中
- Alignment.center : 居中
- Alignment(x, y) : 左上角是(-1, -1),右下角是(1, 1)
- BoxFit.fill : 拉伸
- BoxFit.contain : 内容缩放至最长的一边贴边
- BoxFit.cover : 内容缩放至最短的一边贴边
- BoxFit.fitWidth : 宽度一定,高度自适应
- BoxFit.fitHeight : 高度一定,宽度自适应
- fit : 图片填充方式
- alignment :
- color : color 不是背景色,而是用于图像混入的颜色,配合 colorBlendMode 使用
- repeat : 重复模式,比如纵向重复 ImageRepeat.repeatY
class ImageDemo01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 8,
mainAxisSpacing: 8,
crossAxisCount: 3,
children: [
wrapItem(
Image(image: NetworkImage(imageUrl)),
"NetworkImage",
),
wrapItem(
Image.network(imageUrl),
"Image.network()",
),
Container(),
wrapItem(
Image.network(imageUrl, fit: BoxFit.fill), // 拉伸
"BoxFit.fill",
),
wrapItem(
Image.network(imageUrl, fit: BoxFit.contain), // 内容缩放至最长的一边贴边
"BoxFit.contain",
),
wrapItem(
Image.network(imageUrl, fit: BoxFit.cover), // 内容缩放至最短的一边贴边
"BoxFit.cover",
),
wrapItem(
Image.network(imageUrl, fit: BoxFit.fitWidth), // 宽度一定,高度自适应
"BoxFit.fitWidth",
),
wrapItem(
Image.network(imageUrl, fit: BoxFit.fitHeight), //高度一定,宽度自适应
"BoxFit.fitHeight",
),
Container(),
wrapItem(
Image.network(imageUrl, alignment: Alignment.bottomCenter),
"Alignment.topLeft",
),
wrapItem(
Image.network(imageUrl, alignment: Alignment.center),
"Alignment.center",
),
wrapItem(
// 左上角是(-1, -1),右下角是(1, 1)
Image.network(imageUrl, alignment: Alignment(0, -1)),
"Alignment(0, -1)",
),
wrapItem(
// color不是背景色,而是用于图像混入的颜色,配合 colorBlendMode 使用
Image.network(imageUrl,
color: Colors.green, colorBlendMode: BlendMode.colorDodge),
"BlendMode.colorDodge",
),
wrapItem(
Image.network(imageUrl, repeat: ImageRepeat.repeatY),
"ImageRepeat.repeatY",
),
],
);
}
Widget wrapItem(Widget widget, String tip) {
Text genTip(String tip) {
return Text(
tip,
style: TextStyle(
fontSize: 14,
color: Colors.white,
backgroundColor: Colors.black,
),
);
}
return Stack(
fit: StackFit.expand,
children: [
Container(color: Colors.red[100], child: widget),
Positioned(left: 4, bottom: 4, child: genTip(tip)),
],
);
}
}
2、AssetImage
使用 AssetImage 加载包内图片步骤如下:
- 在 Flutter 项目中创建一个文件夹目录(比如 assets/image),存储图片
- 在 pubspec.yaml 进行配置
assets:
# - assets/images/FSA_QR.png # 配置单张图片
- assets/images/ # 配置多张图片
- 使用图片
class ImageDemo02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 简单写法
// Image.asset('assets/images/FSA_QR.png');
return Image(
image: AssetImage('assets/images/FSA_QR.png'),
);
}
}
3、占位图(placeHolder)
在网络图片未加载出来之前显示的图片称为占位图,可以使用 FadeInImage 实现占位图功能:
class ImageExtensionDemo extends StatelessWidget {
final imageUrl =
"https://up.enterdesk.com/edpic_source/ab/a0/40/aba040ce2daa32fa9cb0cc624b385c0a.jpg";
@override
Widget build(BuildContext context) {
return FadeInImage(
fadeInDuration: Duration(milliseconds: 1),
fadeOutDuration: Duration(milliseconds: 1),
placeholder: AssetImage("assets/images/FSA_QR.png"),
image: NetworkImage(imageUrl),
);
}
}
Flutter 会自动进行图片缓存(默认最多缓存 1000 张,缓存空间最多 100m)
https://api.flutter.dev/flutter/widgets/Image-class.html
https://api.flutter.dev/flutter/painting/ImageCache-class.html
四、字体图标 Widget
Icon 字体图标和图片图标对比:
- 字体图标是矢量图(放大的时候不会失真)
- 字体图标可以设置颜色
- 图标很多时,字体图标占据空间更小
Icon 控件接收一个必传参数 IconData icon,Icons 中配备了大量常用 icon (如 Icons.pets),可以使用 Icons.xxx 或 IconData(编码,字体) 这 2 种方式来得到 IconData 对象。另外,IconData 的本质就是字体,因此也可以使用 Text 来显示字体图标:
class IconDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// return Icon(Icons.pets, size: 300, color: Colors.orange);
// return Icon(IconData(0xe90e, fontFamily: 'MaterialIcons'),size: 300,color: Colors.orange);
/// 1. 使用Text显示字体图标时,需要将字体编码 -> unicode编码
/// 2. 设置对应的字体fontFamily
// return Text("0xe90e", style: TextStyle(fontSize: 100, color: Colors.orange));
return Text(
"\ue90e",
style: TextStyle(
fontSize: 100,
color: Colors.orange,
fontFamily: 'MaterialIcons',
),
);
}
}
五、表单 Widget
1、TextField 配置
- decoration : 用于自定义输入框样式,InputDecoration():
- labelText : 输入框上的 label 文字
- icon : 输入框左侧的 icon
- hintText : 输入框中的提示文字
- border : 边框,通常使用 OutlineInputBorder()
- filled : 是否使用填充色,默认为 false
- fillColor : 填充色(可以理解为输入框的背景色)
- obscureText : 是否模糊文字,默认为 false,密文模式设置设置为 true
- onChanged : 监听文字内容变化
- onSubmitted : 监听提交事件
class TextFieldDemo1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(),
TextField(
decoration: InputDecoration(
labelText: 'username(labelText)',
icon: Icon(Icons.people),
hintText: '请输入用户名(hintText)',
),
),
TextField(
decoration: InputDecoration(
hintText: '请输入用户名(hintText)',
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
labelText: 'OutlineInputBorder',
icon: Icon(Icons.people),
border: OutlineInputBorder(),
),
),
TextField(
decoration: InputDecoration(
labelText: 'fillColor',
icon: Icon(Icons.people),
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.red[100],
),
),
TextField(
decoration: InputDecoration(hintText: '监听事件'),
onChanged: (value) => print("onChange:$value"), // 监听文字内容变化
onSubmitted: (value) => print("onSubmitted:$value"), // 监听提交事件
),
TextField(
obscureText: true, // 模糊文本
decoration: InputDecoration(
labelText: 'password',
icon: Icon(Icons.lock),
border: OutlineInputBorder(),
),
)
],
);
}
}
2、TextField 内容获取
Flutter 是声明式 UI,也没有提供 ref 之类的方式去获取到 TextField 控件,因此无法通过 TextField 对象来获取输入框中的内容,不过,可以为 TextField 指定 controller,通过 controller 来获取对应输入框中的内容:
题外话:Vue 和 React 可以为控件指定 ref 值,用于在 js 或 jsx 中来获取到控件。
class TextFieldDemo2 extends StatelessWidget {
final usernameTextEditController = TextEditingController();
final passwordTextEditController = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextField(
controller: usernameTextEditController,
decoration: InputDecoration(
labelText: 'username',
icon: Icon(Icons.people),
hintText: '请输入用户名',
border: OutlineInputBorder(),
),
),
SizedBox(height: 8),
TextField(
controller: passwordTextEditController,
obscureText: true,
decoration: InputDecoration(
labelText: 'password',
hintText: '请输入密码',
icon: Icon(Icons.lock),
border: OutlineInputBorder(),
),
),
SizedBox(height: 8),
Container(
// width: 300,
width: double.infinity,
height: 40,
child: FlatButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("登录"),
onPressed: () {
// 1. 获取用户名和密码
final username = usernameTextEditController.text;
final password = passwordTextEditController.text;
print("账号:$username , 密码:$password");
},
),
),
],
),
);
}
}
相关推荐
- 台积电提出SRAM存内计算新方法,能效比可达89TOPS/W
-
芯东西(公众号:aichip001)编译|高歌编辑|云鹏芯东西3月16日消息,近期,台积电的研究人员在ISSCC2021会议上公布了一种改良的SRAM存储器阵列,该SRAM阵列采用22nm工...
- Golang中如何判断两个slice是否相等?
-
在Golang中,要判断两个slice是否相等是不能直接使用==运算符的(==只能说明两个slice是否指向同一个底层数组)。如果两个slice的底层数组相同,但长度或容量不同...
- JS入门基础知识(js基础知识总结笔记)
-
JS对象操作对象增删改查创建对象letobj={}新增属性obj.a=1修改属性obj.a='a'...
- 趣谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
-
大家好,我是Echa。好久没跟粉丝们细聊JavaScript那点事了。做一名全栈工程师,JS基础还是要打牢,这样的话不管底层业务逻辑以及第三方框架怎么变化,都离不开基础。本文文章属于基础篇,阅读有点...
- 告别 substr() 和 substring()?更可靠的 JavaScript 字符串截取方法
-
JavaScript提供了三个主要的字符串截取方法:...
- golang第九天,切片(slice)介绍(golang 切片作为参数)
-
什么是切片golang切片是对数组的抽象。go的数组长度不可改变,在特定场景中这样的集合就不太适用,go中提供了一种灵活,功能强悍的内置类型切片(“动态数组”),与数组相比切片的长度是不固定的,可以追...
- Go语言零到一:数组(go struct数组)
-
引言...
- 你说你熟悉Slice,这道slice题你能答对吗?
-
每当你花费大量时间使用某种特定工具时,深入了解它并了解如何高效地使用它是很值得的。...
- Python 3.14七大新特性总结:从t-string模板到GIL并发优化
-
Python3.14已进入测试阶段,根据PEP745发布计划,该版本已停止引入新功能,也就是说新特征就应该已经固定下来了。所以本文基于当前最新的beta2版本,深入分析了Python3.14中...
- Python 幕后:Python导入import的工作原理
-
更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python最容易被误解的方面其中之一是import。...
- Python元类实现自动化编程的正确姿势
-
元类是Python中用于创建类的类。通过元类机制,开发者可在运行时动态创建和修改类,为框架开发、设计模式实现和高级架构设计提供核心支持。在Python语言的高级特性中,元类占据着独特而重要的地位。作...
- Python字符串详解与示例(python字符串类型及操作)
-
艾瑞巴蒂字符串的干货来了,字符串是程序中最常见的数据类型之一,用来表示数据文本,下面就来介绍下字符串的特性,操作和方法,和一些示例来吧道友:1.字符串的创建在python中字符串可以永单引号(...
- 恕我直言!你对Python里的import一无所知
-
文章来源:https://mp.weixin.qq.com/s/4WAOU_Lzy651IE-2zZSFfQ原文作者:写代码的明哥...
- Python基础:字符串操作(python字符串的用法)
-
字符串是Python中最常用的数据类型之一,用于表示文本数据。我们将学习如何对字符串进行常见的操作,包括创建、访问、修改和处理字符串。通过掌握这些技巧,您将能够更好地处理和操作文本数据。让我们开始吧!...
- Python 中 字符串处理的高效方法,不允许你还不知道
-
以下是Python中字符串处理的高效方法...
- 一周热门
-
-
C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)
-
因果推断Matching方式实现代码 因果推断模型
-
git pull命令使用实例 git pull--rebase
-
面试官:git pull是哪两个指令的组合?
-
git 执行pull错误如何撤销 git pull fail
-
git pull 和git fetch 命令分别有什么作用?二者有什么区别?
-
git fetch 和git pull 的异同 git中fetch和pull的区别
-
git pull 之后本地代码被覆盖 解决方案
-
还可以这样玩?Git基本原理及各种骚操作,涨知识了
-
git命令之pull git.pull
-
- 最近发表
-
- 台积电提出SRAM存内计算新方法,能效比可达89TOPS/W
- Golang中如何判断两个slice是否相等?
- JS入门基础知识(js基础知识总结笔记)
- 趣谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
- 告别 substr() 和 substring()?更可靠的 JavaScript 字符串截取方法
- golang第九天,切片(slice)介绍(golang 切片作为参数)
- Go语言零到一:数组(go struct数组)
- 你说你熟悉Slice,这道slice题你能答对吗?
- Python 3.14七大新特性总结:从t-string模板到GIL并发优化
- Python 幕后:Python导入import的工作原理
- 标签列表
-
- git pull (33)
- git fetch (35)
- mysql insert (35)
- mysql distinct (37)
- concat_ws (36)
- java continue (36)
- jenkins官网 (37)
- mysql 子查询 (37)
- python元组 (33)
- mybatis 分页 (35)
- vba split (37)
- redis watch (34)
- python list sort (37)
- nvarchar2 (34)
- mysql not null (36)
- hmset (35)
- python telnet (35)
- python readlines() 方法 (36)
- munmap (35)
- docker network create (35)
- redis 集合 (37)
- python sftp (37)
- setpriority (34)
- c语言 switch (34)
- git commit (34)