Flutter - 常见的基础Widget
wptr33 2024-12-05 17:00 15 浏览
一、文本 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");
},
),
),
],
),
);
}
}
相关推荐
- 搭建Oracle数据库服务器(oracle数据库服务器安装教程)
-
【十一】搭建Oracle数据库服务器...
- Oracle 删除大量表记录操作总结(oracle删除表记录数据)
-
删除表数据操作清空所有表记录TRUNCATETABLEyour_table_name;...
- 专访搜狗DBA负责人王林平:为何从Oracle转向MySQL?
-
王林平CSDN:首先,请做个自我介绍,目前所负责的领域以及所在公司。王林平:大家好,我是王林平,目前在搜狗商业平台研发部工作。主要负责商业广告数据库的维护、优化、架构设计、流程体系建设、自动化运维平台...
- Oracle数据库知识 day01 Oracle介绍和增删改查
-
一、oracle介绍ORACLE数据库系统是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或B/S体系结构...
- 深入探索Oracle 回表原理、影响与优化技巧
-
什么是回表当对一个列创建索引之后,索引会包含该列的键值以及键值对应行所在的rowid。通过索引中记录的rowid访问表中的数据就叫回表。执行计划中的TABLEACCESSBYINDEXROW...
- 那些年我们踩过的语句创建oracle 12c cdb实例的坑
-
现在大多数客户使用oracle还是11g版本的,很多小伙伴可能还没接触过12c,所以今天小编要为大家科普下12c版本的oracle的安装过程中会出现的错误。前面步骤其实都是一样的,我们就直接从建好1...
- Oracle高级数据库特性揭秘:存储过程、触发器与权限管理
-
当谈论Oracle高级数据库特性时,存储过程和函数、触发器、权限管理和安全性以及数据库连接和远程访问是关键概念。下面我将为每个主题提供详细的解释,并附上高质量示例。...
- ORACLE内核解密之表空间管理(oracle表空间大小是由什么决定)
-
一、ORACLE表空间管理1、本地表空间管理tablespace(LMT)...
- Oracle 创建磁盘组报错ORA-15137的问题分析与解决思路
-
ASM扩容本来是件很简单的事,当ASM磁盘准备好之后,直接一条命令就会添加上。但是也会有异常情况,最近就碰到Oracle19c在扩容时报错的故障,供大家参考。...
- DBA日记之Oracle数据库索引一(oracle数据库索引有哪几种)
-
什么是索引在oracle数据库中,索引是数据库中一种可选的数据结构,通常与表或簇相关。用户可以在表的一列或数列上建立索引,以提高在此表上执行SQL语句的性能。就像本文档的索引可以帮助读者快速定位所...
- 利用Oracle触发器实现不同数据库之间的数据同步
-
首先在两个数据库之间创建链接(DBLink),然后对要同步地表做一个同义(synonym),最后建一个触发器实现同步。实现步骤如下:1)为保证连接到另一台远程服务器的数据库,需要建立一个DBLin...
- oracle已有表的分表分区优化操作步骤(单表过大)
-
第一章、步骤总览0、获取创建表空间DDL、创建表空间(该步骤在将分区放入不同的表空间时采用)...
- Oracle 表分区在线重定义(oracle表分区后查询语句改变吗)
-
表分区有以下优点:a、改善查询性能:对分区对象的查询可以仅搜索自己关心的分区,提高检索速度。b、增强可用性:如果表的某个分区出现故障,表在其他分区的数据仍然可用;c、维护方便:如果表的某个分区出现故障...
- ORACLE 体系 - 14(oracle 11g的体系结构有几种)
-
【十四】数据移动...
- Oracle-架构、原理、进程(oracle进程结构)
-
详解:首先看张图:对于一个数据库系统来说,假设这个系统没有运行,我们所能看到的和这个数据库相关的无非就是几个基于操作系统的物理文件,这是从静态的角度来看,如果从动态的角度来看呢,也就是说这个数据库系统...
- 一周热门
-
-
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
-
- 最近发表
-
- 搭建Oracle数据库服务器(oracle数据库服务器安装教程)
- Oracle 删除大量表记录操作总结(oracle删除表记录数据)
- 专访搜狗DBA负责人王林平:为何从Oracle转向MySQL?
- Oracle数据库知识 day01 Oracle介绍和增删改查
- 深入探索Oracle 回表原理、影响与优化技巧
- 那些年我们踩过的语句创建oracle 12c cdb实例的坑
- Oracle高级数据库特性揭秘:存储过程、触发器与权限管理
- ORACLE内核解密之表空间管理(oracle表空间大小是由什么决定)
- Oracle 创建磁盘组报错ORA-15137的问题分析与解决思路
- DBA日记之Oracle数据库索引一(oracle数据库索引有哪几种)
- 标签列表
-
- 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)