|
TextSpan({
this.style, // 指定风格，类似text中的style
this.text, // String，指定文本片段
this.children, // List类型，代表子节点，每个节点代表一个文本片段
this.recognizer, // GestureRecognizer类型，指定该文本片段的手势交互，GestureRecognizer是一个抽象类（有许多子类，如点击监听器TapGestureRecognizer
})
* 代码演示
import ‘package:flutter/gestures.dart’;
/**
- 导入库
**/
import ‘package:flutter/material.dart’; // Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: ‘Widget_Demo’, //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
//主体
body: new Center(
//在屏幕中央显示一个文本
child: RichText( // 根节点的设置会影响下面两个子节点
text: TextSpan(style: TextStyle(fontSize: 20), children: [
// 每个子节点的设置会覆盖根节点的设置
TextSpan(text: "Android ", style: TextStyle(
color: Colors.blue, fontSize: 60,),
recognizer: TapGestureRecognizer() // 设置点击事件，此处以点击监听器TapGestureRecognizer()为例
…onTap = () {
print(“点击了Android”);
},),
TextSpan(text: "iOS ",
style: TextStyle(color: Colors.red, fontSize: 50,)),
TextSpan(text: “Web”, style: TextStyle(
color: Colors.green, fontSize: 40,)),
]),
textDirection: TextDirection.ltr,
)
),
);
}
}
* 效果展示
### 特别注意
Text控件中，有一个静态属性rich，可达到类似RichText的效果
Text.rich(
this.textSpan, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
})
深入Text的源码build（）方法可知，Text控件实际上是对RichText控件的封装
@override
Widget build(BuildContext context) {
…
Widget result = RichText(
…
text: TextSpan(
…
text: data,
children: textSpan != null ? [textSpan] : null,
),
);
…
return result;
}
* * *
# 3\. TextField
* 应用场景：文本输入框，类似于Android中的EditText
* 属性说明
const TextField({
Key key,
this.controller, //编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
this.focusNode, //用于管理焦点
this.decoration = const InputDecoration(), //输入框的装饰器，用来修改外观
TextInputType keyboardType, //设置输入类型，不同的输入类型键盘不一样
this.textInputAction, //用于控制键盘动作（一般位于右下角，默认是完成）
this.textCapitalization = TextCapitalization.none,
this.style, //输入的文本样式
this.textAlign = TextAlign.start, //输入的文本位置
this.textDirection, //输入的文字排列方向，一般不会修改这个属性
this.autofocus = false, //是否自动获取焦点
this.obscureText = false, //是否隐藏输入的文字，一般用在密码输入框中
this.autocorrect = true, //是否自动校验
this.maxLines = 1, //最大行
this.maxLength, //能输入的最大字符个数
this.maxLengthEnforced = true, //配合maxLength一起使用，在达到最大长度时是否阻止输入
this.onChanged, //输入文本发生变化时的回调
this.onEditingComplete, //点击键盘完成按钮时触发的回调，该回调没有参数，(){}
this.onSubmitted, //同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String){}
this.inputFormatters, //对输入文本的校验
this.enabled, //输入框是否可用
this.cursorWidth = 2.0, //光标的宽度
this.cursorRadius, //光标的圆角
this.cursorColor, //光标的颜色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.down,
this.enableInteractiveSelection,
this.onTap, //点击输入框时的回调(){}
this.buildCounter,
})
// 此处主要介绍TextField.decoration属性
InputDecoration({
this.icon, //位于装饰器外部和输入框前面的图片
this.labelText, //用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，
this.labelStyle, // 控制labelText的样式,接收一个TextStyle类型的值
this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
this.helperStyle, //helperText的样式
this.hintText, //提示文本，位于输入框内部
this.hintStyle, //hintText的样式
this.hintMaxLines, //提示信息最大行数
this.errorText, //错误信息提示
this.errorStyle, //errorText的样式
this.errorMaxLines, //errorText最大行数
this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
this.isDense, //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
this.contentPadding, //内间距
this.prefixIcon, //位于输入框内部起始位置的图标。
this.prefix, //预先填充的Widget,跟prefixText同时只能出现一个
this.prefixText, //预填充的文本，例如手机号前面预先加上区号等
this.prefixStyle, //prefixText的样式
this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
this.suffix, //位于输入框尾部的控件，同样的不能和suffixText同时使用
this.suffixText,//位于尾部的填充文字
this.suffixStyle, //suffixText的样式
this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
this.counterStyle, //counterText的样式
this.filled, //如果为true，则输入使用fillColor指定的颜色填充
this.fillColor, //相当于输入框的背景颜色
this.errorBorder, //errorText不为空，输入框没有焦点时要显示的边框
this.focusedBorder, //输入框有焦点时的边框,如果errorText不为空的话，该属性无效
this.focusedErrorBorder, //errorText不为空时，输入框有焦点时的边框
this.disabledBorder, //输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
this.enabledBorder, //输入框可用时显示的边框，如果errorText不为空的话，该属性无效
this.border, //正常情况下的border
this.enabled = true, //输入框是否可用
this.semanticCounterText,
this.alignLabelWithHint,
})
* 代码演示
/**
- 导入库
**/
import ‘package:flutter/material.dart’;
import ‘package:flutter/services.dart’; // Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: ‘Widget_Demo’, //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
//主体
body: new TextField(
decoration: InputDecoration(
icon: Icon(Icons.person), // 输入框前加入图片
hintText: “hintText”, // 提示输入信息
labelText: “labelText”, // 描述输入框，当输入框获取焦点时默认会浮动到上方
labelStyle: TextStyle( // labelText的样式
color: Colors.red,
fontSize: 20,
),
hasFloatingPlaceholder: false,// labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
helperText: “helperText”, // 输入框下方提示
helperStyle: TextStyle( // 输入框下方提示样式
color: Colors.green,//绿色
fontSize: 20,//字体变大
),
errorText: “errorText”, // 错误提示，若该属性不为null，那么labelText失效
prefixIcon: Icon(Icons.perm_identity), // 输入框前端预填充图片
prefixText: “prefixText”,// 预填充文字
suffixIcon: Icon(Icons.remove_red_eye,), // 输入框后端预填充图片
suffixText: “suffixText”, // 输入框后端预填充文字
counterText: “counterText”, // 输入框右下方文字
filled: true, // 颜色填充
fillColor: Colors.grey,
// 边界设置 - 外边界
enabledBorder: OutlineInputBorder(
/边角/
borderRadius: BorderRadius.all(
Radius.circular(30), //边角为30
),
borderSide: BorderSide(
color: Colors.amber, //边线颜色为黄色
width: 2, //边线宽度为2
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green, //边框颜色为绿色
width: 5, //宽度为5
)),
// 边界设置 - 底边界
errorBorder: UnderlineInputBorder(
/边角/
borderRadius: BorderRadius.all(
Radius.circular(30), //边角为30
),
borderSide: BorderSide(
color: Colors.amber, //边线颜色为黄色
width: 2, //边线宽度为2
),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green, //边框颜色为绿色
width: 5, //宽度为5
)),
),
keyboardType: TextInputType.phone, // 只能输入手机号
textInputAction: TextInputAction.search, // 键盘动作的按钮变为搜索
onEditingComplete: (){ // 点击键盘的动作按钮时的回调（无参）
print("点击了键盘上的动作按钮");
},
onSubmitted: (val){// 点击键盘的动作按钮时的回调（参数为输入框的值）
print("点击了键盘上的动作按钮，当前输入框的值为：${val}");
},
onChanged: (val) { // 输入文本发生变化时的回调，参数即为输入框中的值
print(val);
},
inputFormatters: [ // 输入限制
WhitelistingTextInputFormatter(RegExp("[a-z]")),// 白名单校验，只能输入规定的字符，此处只能输入a-z
BlacklistingTextInputFormatter(RegExp("[a-z]")), // 黑名单校验，除了规定的字符其他的都可以输入，此处即除了a-z不能输入其他都能输入
LengthLimitingTextInputFormatter(5) // 限制输入的长度
],
)
);
}
* 示意图
|