目录
TextEditingController：提供了多种读取和操作输入文本的属性和方法
TextInputFormatter：通过正则表达式控制输入的内容和格式
SliverChildBuilderDelegate：提供一个 NullableIndexedWidgetBuilder builder 函数生成子组件
SliverChildListDelegate：提供一个 List children 生成子组件
一、基础组件
-
RichText
在一段文本中使用不同的文字样式 或 在文本中插入其他小部件，比如：文字消息中插入表情、部分文字高亮/添加超链接、需要使用图标标志文字
-
主要参数
RichText({ Key? key, required this.text, //必需参数，包含的文本内容，类型为InlineSpan //主要实现类为TextSpan，可嵌套InlineSpan列表，包含WidgetSpan，实现文本和其他部件的组合 this.textAlign = TextAlign.start, //文本对齐方式，默认为左对齐 this.textDirection, //文本方向 this.softWrap = true, //是否允许文本换行 this.overflow = TextOverflow.clip, //文本溢出时的处理方式，默认为裁剪掉溢出部分 this.textScaleFactor = 1.0, //文本缩放因子 this.maxLines, //文本最大行数 this.locale, this.strutStyle, this.textWidthBasis = TextWidthBasis.parent, this.textHeightBehavior, }) : assert(text != null), assert(textAlign != null), assert(softWrap != null), assert(overflow != null), assert(textScaleFactor != null), assert(maxLines == null || maxLines > 0), assert(textWidthBasis != null), super(key: key, children: _extractChildren(text)); -
使用示例
@override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RichText( text: const TextSpan( style: TextStyle(fontSize: 20), //没有单独设置style的TextSpan的默认样式 children: [ WidgetSpan( child: Icon(Icons.thumb_up, size: 20, color: Colors.amber) ), TextSpan(text: ' 点赞 '), WidgetSpan( child: Icon(Icons.favorite, size: 20, color: Colors.red) ), TextSpan(text: ' 收藏 '), WidgetSpan( child: Icon(Icons.chat, size: 20, color: Colors.indigoAccent) ), TextSpan(text: ' 评论 ') ]))]));
-
-
TextField
实现输入框行为限制和外观设置
-
主要参数
const TextField({ Key? key, this.controller, //输出框文本控制和监听工具，类型为TextEditingController this.focusNode, //焦点管理工具，类型为FocusNode this.readOnly = false, //是否只读，默认为false this.showCursor, //是否显示光标 this.autofocus = false, //是否自动获取焦点，默认为false this.obscuringCharacter = '•', //用于遮挡的字符 this.obscureText = false, //是否遮挡文本 this.maxLines = 1, //最大行数，默认为1 this.maxLength, //最大字符数 this.onChanged, //文本改变时的回调函数 this.onEditingComplete, //编辑完成时的回调函数 this.onSubmitted, //提交时的回调函数 this.inputFormatters, //格式化限制，类型为List<TextInputFormatter> this.enabled, //是否启用 this.onTap, //点击时的回调函数 }) -
辅助类
-
TextEditingController：提供了多种读取和操作输入文本的属性和方法
-
获取文本：text = TextController.text;
-
设置文本：TextController.text = "new text";
-
监听文本变化：TextController.addListener();
-
清空文本：TextController.clear();
-
-
FocusNode：绑定输入框后控制其焦点变化
-
请求焦点：FocusNode.requestFocus();
-
失去焦点：FocusNode.unfocus();
-
添加焦点监听器：FocusNode.addListener();
-
-
TextInputFormatter：通过正则表达式控制输入的内容和格式
-
允许输入：FilteringTextInputFormatter.allow();
-
禁止输入：FilteringTextInputFormatter.deny();
-
-
-
使用示例
class _HomeScreenState extends State<HomeScreen> { final TextEditingController _textController = TextEditingController(); final FocusNode _focusNode = FocusNode(); @override void dispose() { //注销页面时释放资源 _textController.dispose(); _focusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Row( children: [ Expanded( child: TextField( controller: _textController, //设置输入框的 TextEditingController focusNode: _focusNode, //设置输入框的 FocusNode inputFormatters: [ //通过正则表达式限制输入 FilteringTextInputFormatter.allow(RegExp('[a-z0-9]')), FilteringTextInputFormatter.deny(RegExp('[m-q]')), ], decoration: const InputDecoration( labelText: '一个输入框', border: OutlineInputBorder(), ), onSubmitted: (text) { _focusNode.unfocus(); //输入完成后通过FocusNode令输入框失焦 setState(() {}); //更新body中的text } ) ), IconButton( icon: const Icon(Icons.clear,color: Colors.black), onPressed: (){ setState(() { _textController.clear(); //通过 TextEditingController 清空输入框中的文本 }); })])), body: Center( child: Text(_textController.text) //通过 TextEditingController 获取输入框中的文本 )); } }
-
二、容器组件
-
BottomSheet
页面底部弹出层，一般结合 Scaffold 中的 bottomNavigationBar 使用，提供动画效果控制和一些交互操作
-
主要参数
const BottomSheet({ Key? key, this.animationController, //动画控制器 this.enableDrag = true, //是否允许拖动，默认允许 this.onDragStart, //开始拖动时的回调函数 this.onDragEnd, //停止拖放时的回调函数 this.backgroundColor, this.elevation, this.shape, this.clipBehavior, this.constraints, required this.onClosing, //必需参数，底部弹出层关闭时的回调函数 required this.builder, //必需参数，构建底部弹出层内容 }) : assert(enableDrag != null), assert(onClosing != null), assert(builder != null), assert(elevation == null || elevation >= 0.0), super(key: key);
-
-
GestureDetector
实现手势行为检测，为其他组件提供相应各种交互操作的能力，如点击、双击、长按、拖动、缩放等
-
主要参数
GestureDetector({ Key? key, this.child, //需要交互的子组件 this.onTap, //单击手势回调函数 this.onDoubleTap, //双击手势回调函数 this.onLongPress, //长按手势回调函数 this.onVerticalDragStart,this.onVerticalDragUpdate,this.onVerticalDragEnd, //垂直拖动手势回调函数 this.onHorizontalDragStart,this.onHorizontalDragUpdate,this.onHorizontalDragEnd, //水平拖动手势回调函数 this.onPanStart,this.onPanUpdate,this.onPanEnd, //不区分方向拖动手势回调函数 this.onScaleStart,this.onScaleUpdate,this.onScaleEnd, //缩放手势回调函数 this.behavior, })
-
-
Visibility
控制是否显示组件，以及在隐藏子部件时是否保留其状态、动画、大小、语义和交互性
-
主要参数
const Visibility({ Key? key, required this.child, //必需参数，需要控制可见性的组件 this.replacement = const SizedBox.shrink(), //visible为false时的替代组件，默认为一个0大小的空盒 this.visible = true, //是否可见，默认为可见 this.maintainState = false, //隐藏时是否保持状态 this.maintainAnimation = false, //隐藏时是否保持动画 this.maintainSize = false, //隐藏时是否保持大小 this.maintainSemantics = false, //隐藏时是否保持语义 this.maintainInteractivity = false, //隐藏时是否保持交互性 }) : assert(child != null), assert(replacement != null), assert(visible != null), assert(maintainState != null), assert(maintainAnimation != null), assert(maintainSize != null), assert( //确保在保持状态的情况下才能保持其他的 maintainState == true || maintainAnimation == false, 'Cannot maintain animations if the state is not also maintained.', ), assert( maintainAnimation == true || maintainSize == false, 'Cannot maintain size if animations are not maintained.', ), assert( maintainSize == true || maintainSemantics == false, 'Cannot maintain semantics if size is not maintained.', ), assert( maintainSize == true || maintainInteractivity == false, 'Cannot maintain interactivity if size is not maintained.', ), super(key: key);
-
三、布局组件
-
ListView
-
主要参数
ListView({ Key? key, //可滚动widget公共参数 Axis scrollDirection = Axis.vertical, //滚动方向，默认为垂直方向 bool reverse = false, //是否反向滚动 ScrollController? controller, //滚动行为控制器 bool? primary, //是否为主滚动视图 ScrollPhysics? physics, //滚动物理特性 EdgeInsetsGeometry? padding, //内边距 //ListView各个构造函数的共同参数 bool shrinkWrap = false, //是否根据子组件的总长设置滚动视图大小 double? itemExtent, //各子组件的固定高度，和 prototypeItem 互斥，选其一 Widget? prototypeItem, //列表项原型子组件，和 itemExtent 互斥，选其一 bool addAutomaticKeepAlives = true, //是否自动保持子组件的活动状态 bool addRepaintBoundaries = true, //是否为每个子组件添加重绘边界 bool addSemanticIndexes = true, //是否为每个子组件添加语义索引 double? cacheExtent, // 预渲染区域长度 List<Widget> children = const <Widget>[], //子widget列表 ... }) -
构造函数
-
ListView()：用于创建静态的滚动列表，懒加载（需要加载时布局和绘制）但是子组件应已创建
-
ListView.builder()：根据需求动态创建列表项，适用于列表项较多/不确定的情况
ListView.builder({ ... required IndexedWidgetBuilder itemBuilder, //必需参数，列表项构造器 int? itemCount, //可选参数，列表项总数 ... }) -
ListView.separated()：可在生成列表项之间添加分隔组件
ListView.separated({ ... required IndexedWidgetBuilder itemBuilder, //必需参数，列表项构造器 required IndexedWidgetBuilder separatorBuilder, //必需参数，分隔符构造器 required int itemCount, //必需参数，列表项总数 ... }) -
ListView.custom()：提供自定义选项构建列表
const ListView.custom({ ... required this.childrenDelegate, //必需参数，通过 SliverChildDelegate 对象来管理子项的创建和销毁 ... })
-
-
辅助类
-
SliverChildBuilderDelegate：提供一个 NullableIndexedWidgetBuilder builder 函数生成子组件
-
SliverChildListDelegate：提供一个 List<Widget> children 生成子组件
-
-
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
