文本组件常用的案例
2021-01-03 本文已影响0人
爱吃豆包
介绍五个项目中常用的文本组件案例：
后面还有每个案例的单独代码
- 过渡颜色的文字
- 带前后置标签的文本
- “服务协议”效果
- 登录密码输入框
- 评论回复
截屏2021-01-03 下午6.21.52.png
import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
/**
* 文本组件案例:
* 介绍五个项目中常用的文本组建案例：
* 1. 过渡颜色的文字
* 2.带前后置标签的文本
* 3.“服务协议”效果
* 4.登录密码输入框
* 5.评论回复
*
*/
class TestCase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Builder(
// Builder 组件式为了计算当前组件(当前是Text)的大小, 生成LinearGradien(渲染对象)
builder: (BuildContext context) {
// 获取当前渲染对象
RenderBox box = context.findRenderObject();
// 线性渐变
final Shader linearGradient = LinearGradient(
colors: <Color>[Colors.purple, Colors.blue], // 渐变颜色
).createShader(// 创建材质(面板)
// Rect 表示矩形
Rect.fromLTWH(0.0, 0.0, box?.size?.width, box?.size?.height));
return Text(
"这是过度颜色的文字",
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
foreground: Paint()..shader = linearGradient,
),
);
},
),
RichText(
// 富文本组件
text: TextSpan(style: DefaultTextStyle.of(context).style, // 使用默认样式
children: <InlineSpan>[
// 嵌套多个文本相关组件
// WidgetSpan 这个控件支持接入任何Widget
// 有图文混合的需求的，使用这个类非常合适
WidgetSpan(
child: Container(
// EdgeInsets 指定填充方向:
// fromLTRB(double left, double top, double right, double, bottom)：分别指定四个方向的填充。
// all(double value) : 所有方向均使用相同数值的填充。
// only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
// symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
margin: EdgeInsets.only(right: 10),
padding: EdgeInsets.symmetric(horizontal: 10),
// decoration 装饰属性
decoration: BoxDecoration(
// BoxDecoration 盒子装饰
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue),
child: Text(
'标签',
style: TextStyle(color: Colors.white),
),
)),
TextSpan(text: '带前后置标签的文本'),
]),
),
Text.rich(
TextSpan(
text: '登录即代表同意并阅读',
style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
children: [
TextSpan(
text: '《服务协议》',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
print('onTap');
},
),
]),
),
TextField(
// decoration 装饰属性
decoration: InputDecoration(
// 输入时的装饰
fillColor: Color(0x30cccccc), // 填充的颜色
filled: true, // 填充时是否填满
// enabledBorder 启用了输入的时候的边框样式
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00FF0000)), // 边框样式
borderRadius: BorderRadius.all(Radius.circular(100))), // 边框圆角
hintText: '输入密码', // 未输入时的提示文字
// focusedBorder 获取焦点的时候的边框样式
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00000000)), // 边框样式
borderRadius: BorderRadius.all(Radius.circular(100))), // 边框圆角
),
textAlign: TextAlign.center, // 内容居中
obscureText: true, // 是否启用文字模糊保护(也就是内容显示为 *****)
onChanged: (value) {
print('输入框文字有变化：' + value);
},
),
Text.rich(
TextSpan(
text: '回复',
style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
children: [
TextSpan(
text: '@weiximei：',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold
),
recognizer: TapGestureRecognizer()..onTap = () {
print('手势触发了点击onTap：');
},
),
TextSpan(
text: '今天在干什么呢？',
),
]),
)
],
),
);
}
}
每个例子代码：
#过渡颜色的文字
Builder(
// Builder 组件式为了计算当前组件(当前是Text)的大小, 生成LinearGradien(渲染对象)
builder: (BuildContext context) {
// 获取当前渲染对象
RenderBox box = context.findRenderObject();
// 线性渐变
final Shader linearGradient = LinearGradient(
colors: <Color>[Colors.purple, Colors.blue], // 渐变颜色
).createShader(// 创建材质(面板)
// Rect 表示矩形
Rect.fromLTWH(0.0, 0.0, box?.size?.width, box?.size?.height));
return Text(
"这是过度颜色的文字",
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
foreground: Paint()..shader = linearGradient,
),
);
},
)
截屏2021-01-03 下午6.21.06.png
Builder组件是为了计算当前Text组件大小，生成LinearGradient。
#带前后置标签的文本
RichText(
// 富文本组件
text: TextSpan(style: DefaultTextStyle.of(context).style, // 使用默认样式
children: <InlineSpan>[
// 嵌套多个文本相关组件
// WidgetSpan 这个控件支持接入任何Widget
// 有图文混合的需求的，使用这个类非常合适
WidgetSpan(
child: Container(
// EdgeInsets 指定填充方向:
// fromLTRB(double left, double top, double right, double, bottom)：分别指定四个方向的填充。
// all(double value) : 所有方向均使用相同数值的填充。
// only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
// symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
margin: EdgeInsets.only(right: 10),
padding: EdgeInsets.symmetric(horizontal: 10),
// decoration 装饰属性
decoration: BoxDecoration(
// BoxDecoration 盒子装饰
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue),
child: Text(
'标签',
style: TextStyle(color: Colors.white),
),
)),
TextSpan(text: '带前后置标签的文本'),
]),
)
截屏2021-01-03 下午6.20.28.png
#“服务协议”
通常在登录页面的底部会出现登录即代表同意并阅读 《服务协议》，其中《服务协议》为蓝色且可点击：
Text.rich(
TextSpan(
text: '登录即代表同意并阅读',
style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
children: [
TextSpan(
text: '《服务协议》',
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
print('onTap');
},
),
]),
)
image
#登录密码输入框
TextField(
// decoration 装饰属性
decoration: InputDecoration(
// 输入时的装饰
fillColor: Color(0x30cccccc), // 填充的颜色
filled: true, // 填充时是否填满
// enabledBorder 启用了输入的时候的边框样式
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00FF0000)), // 边框样式
borderRadius: BorderRadius.all(Radius.circular(100))), // 边框圆角
hintText: '输入密码', // 未输入时的提示文字
// focusedBorder 获取焦点的时候的边框样式
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0x00000000)), // 边框样式
borderRadius: BorderRadius.all(Radius.circular(100))), // 边框圆角
),
textAlign: TextAlign.center, // 内容居中
obscureText: true, // 是否启用文字模糊保护(也就是内容显示为 *****)
onChanged: (value) {
print('输入框文字有变化：' + value);
},
)
image
#评论回复
Text.rich(
TextSpan(
text: '回复',
style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
children: [
TextSpan(
text: '@weiximei：',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold
),
recognizer: TapGestureRecognizer()..onTap = () {
print('手势触发了点击onTap：');
},
),
TextSpan(
text: '今天在干什么呢？',
),
]),
)
截屏2021-01-03 下午6.19.46.png
