超详细！关于Flutter文本组件Widget的全面解读

最新推荐文章于 2024-06-11 10:19:01 发布

2401_83704192

最新推荐文章于 2024-06-11 10:19:01 发布

阅读量870

点赞数 30

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_83704192/article/details/138718520

版权

程序员专栏收录该内容

439 篇文章 1 订阅

订阅专栏

代码演示

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());

// 返回的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) // 限制输入的长度
],

)
);
}

示意图

[图片上传失败…(image-35d107-1595235302539)]

下面，额外展示一个属性设置：TextField controller，用于对输入框进进行赋值 & 取值操作

/**

导入库
**/
import ‘package:flutter/material.dart’;// Material UI组件库

void main() => runApp(MyApp());

// 有状态控件显示
class MyHomePage extends StatefulWidget {
@override
State createState() {
return new _MyHomePageState();
}
}

class _MyHomePageState extends State{

// 创建TextEditingController对象
TextEditingController _userEtController = TextEditingController();

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
//主体
body: Container(
padding: EdgeInsets.all(10),
child: Column(

最后的最后

对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！

当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的

最后，互联网不存在所谓的寒冬，只是你没有努力罢了！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

//主体
body: Container(
padding: EdgeInsets.all(10),
child: Column(

最后的最后

当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的

[外链图片转存中…(img-kw2TbqA6-1715413416222)]

2401_83704192

关注

30
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
超详细！关于Flutter文本组件Widget的全面解读

对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的最后，互联网不存在所谓的寒冬，只是你没有努力罢了！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！//主体对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！
复制链接

扫一扫