flutter 组件

基本组件

StatefulWidget

生命周期

didUpdateWidget

只要父组件调用setState方法，无论是否修改了子组件内的值，都会调用此方法

oldWidget

携带了状态变化之前的数据对象。

Scaffold

resizeToAvoidBottomInset

是否调整屏幕的大小以避免键盘遮挡住其中的元素，默认为真。

容器

Container

alignment

内部元素的对齐方式

alignment: Alignment.center,

width

宽度

width: double.infinity,// 宽度占满父元素

constraints

盒容器的约束。

decoration

装饰，通常使用 BoxDecoration

SizedBox

一个具有指定大小的盒容器。

SizedBox.shrink()

父组件允许的最小容器，默认大小0x0，可以用来占位。

AspectRatio

一个固定比例的容器

aspectRatio

宽高比

AspectRatio(
    aspectRatio: 16 / 9, // 宽/高
    child: Container(
        color: Colors.deepPurple,
    ),
),

SafeArea

一个安全的小部件容器，可以保证子级小部件不会因为屏幕的形状产生变化，比如让状态栏显示再水滴屏刘海屏下方。

Stack

绝对定位容器。

alignment

设置子元素的位置。

alignment: Alignment.centerLeft,

ConstrainedBox

用于指定子元素所占空间大小的容器

ConstrainedBox(
    constraints: const BoxConstraints(minHeight: 150, minWidth: 250),
    child: const Card(child: Text("hello ConstrainedBox")),
)

使用BoxConstraints可以指定子元素的最大最小宽高

DecoratedBox

一个使用BoxDecoration做装饰的容器。

DecoratedBox(
    decoration: BoxDecoration(

    ),
    child: 
)

Spacer

一个占位元素，多用于Row和Column

这个元素总会占用一定的空间，可以与Expanded结合使用，通过flex来确定大小

 Row(
   children: const <Widget>[
     Text('Begin'),
     Spacer(), // flex默认为1
     Text('Middle'),
     Spacer(flex: 2), // 占用2/3的剩余空间
     Text('End'),
   ],
 )

Divider

显示一个分割线。

GridView

显示一个可滚动的二维小部件数组。

网格布局，类似表格

GridView.count

显示固定的children

GridView.count(
    crossAxisCount: 3,
    padding: const EdgeInsets.all(10.0),
    mainAxisSpacing: 20,
    crossAxisSpacing: 10,
    childAspectRatio: 2,
    children: [
        ElevatedButton(
            child: const Text('选择城市'),
            onPressed: () => Get.toNamed(Routes.CITY_SELECT),
        ),
    ],
)

crossAxisCount

每行显示的个数

childAspectRatio

每个元素的宽高比

默认1为正方形，此时元素本身的大小是不起作用的

mainAxisSpacing

纵向间距

crossAxisSpacing

横向间距

ListView

physics

当用户上下滑动时，如何响应滚动视图。

NeverScrollableScrollPhysics

不允许滚动。

itemExtent

强制子项在其滚动的方向上，拥有指定的范围。

Visibility

控制子组件的显隐

maintainState

是否保持子组件的状态，默认为false

visible

子组件是否显示

Listener

用于监听触摸事件

Listener(
    child: ConstrainedBox(
      constraints: BoxConstraints.tight(Size(200, 200)),
      child: Center(
        child: Text('click me'),
      )
    ),
    onPointerDown: (event) => print("onPointerDown")
)

behavior

表示命中过程的表现策略

deferToChild

取决于子级是否命中

opaque

子级没有命中时，仍然返回true

translucent

子级没有命中时，仍然可以响应触摸事件，但是返回的hitTest为false，以便可以继续向上冒泡

按钮

IconButton

语义，长按会显示提醒

padding

内部间距，设定之后，icon的大小会适当缩小。

TextButton

onPressed

当为null时，按钮不可点击。

元素

Text

显示一段文本

maxLines

最大行数，超过的内容会被截取

overflow

截取字符串的形式

ellipsis

在截取的末尾显示...

textAlign

文本的对齐方式

style

文本样式

Text(content,
  maxLines: maxLines,
  textAlign: maxLines == 1 ? TextAlign.right : textAlign,
  overflow: TextOverflow.ellipsis,
  style: Theme
      .of(context)
      .textTheme
      .subtitle2
      ?.copyWith(fontSize: 14.0),
)

Image

Image.asset

color

该属性可以从像素级修改图片原本的颜色

表单

Form

用于将多个表单字段小部件组合在一起的容器。

每个单独的表单字段都应该包装在一个 [FormField] 中。

使用[GlobalKey.currentState]获取Form的上下文。

//在整个应用程序中唯一的密钥，可以获取Form的上下文
final GlobalKey<FormState> _formKey = GlobalKey();
Form(
    key: _formKey,
    child: ...
)

在子组件中，可以通过 [Form.of] 获取上下文。

if (_formKey.currentState!.validate()) {
    //表单验证通过
}

autovalidateMode

自动验证模式，设置此模式会自动验证表单下的所有字段。

disabled

不验证

always

总是进行验证

onUserInteraction

用户输入的时候进行验证。

TextFormField/TextField

包含 [TextField] 的 [FormField]。

不必须使用 [Form] 祖先。

可以通过controller设置和获取值。

final TextEditingController _passwordController = TextEditingController();
TextFormField(
    //通过_passwordController.text可以设置和获取表单的值
    controller: _passwordController,
)

obscureText

是否是密码域

obscureText: true,

decoration

InputDecoration，用于设置边框、标签、图标和样式。

autovalidateMode

自动验证模式

validator

验证方法，参数是该字段的值，如果返回字符串，表明验证失败，会在表单下方显示红色的错误信息。

validator: (value) {
  if (ValidUtil.isStringEmpty(value)) {
    return "请输入原密码";
  }
},

inputFormatters

用于限制输入的内容，接收一个 TextInputFormatter 类型的集合

官方提供了两个默认的实现类，LengthLimitingTextInputFormatter 和 FilteringTextInputFormatter

TextFormField(
    inputFormatters: [
        LengthLimitingTextInputFormatter(5),
        FilteringTextInputFormatter.allow(RegExp("[a-z]")),
        FilteringTextInputFormatter.deny(RegExp("[a-g]"))
    ],
)

LengthLimitingTextInputFormatter

用于限制输入内容的长度

FilteringTextInputFormatter

限制输入内容的正则表达式，分为allow（允许）和deny（禁止）两种

FilteringTextInputFormatter.digitsOnly

限制输入只能为数字

TextEditingValue

TextInputFormatter 返回一个TextEditingValue，用于确定文字的内容和光标位置

baseOffset

光标的起始位置

extentOffset

光标的结束位置

若起始位置和结束位置一样，则不选择任何内容
《=0的位置代表开头

也可以使用

TextSelection.collapsed(offset: selectionIndex)

来设定光标的位置，此时起始位置和结束位置相同。

autofocus

默认为false，表示不自动获取焦点

InputDecoration? decoration

TextStyle? labelStyle

标题样式

String? hintText

提示文字

TextStyle? hintStyle

提示文字的样式

EditableText

可编辑的文本

EditableText(
    backgroundCursorColor: Colors.transparent,
    controller: _controller,
    cursorColor: Colors.transparent,
    cursorWidth: 0,
    focusNode: _focusNode,
    style: const TextStyle(fontSize: 18, color: Colors.transparent),
    keyboardType: TextInputType.number,
    inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
        LengthLimitingTextInputFormatter(6)
    ],
    textAlign: TextAlign.center,
    onChanged: (v) {

    },
)

backgroundCursorColor

在渲染浮动光标时绘制与文本对齐的背景光标时使用的颜色。没发现用处，不能为空。

controller

控制正在编辑的文本。

cursorColor

光标的颜色

cursorWidth

光标的宽度

focusNode

焦点

style

文本样式

keyboardType

键盘类型

inputFormatters

文本过滤

textAlign

文本对齐

onChanged

文本发生变化时触发事件

动画

AnimationController

动画控制器，可以控制动画的播放和停止，将动画设置为特定的值。

构造函数中需要使用vsync: this，所以必须混入TickerProvider。

默认情况下，线性的产生0.0-1.0的动画，每秒60帧。

不需要时应该dispose，避免内存泄漏。

forwoard

开始向前运行动画

from

起始值

CurvedAnimation

动画曲线。

Curves

linear

线性动画曲线，单位间隔恒等映射。

decelerate

先快后慢

fastLinearToSlowEaseIn

开始很快，然后变平并且非常缓慢

ease

慢-快-慢，三次动画曲线

easeIn

缓慢开始，快速结束，三次动画曲线

easeInToLinear

缓慢开始，线性结束，三次动画曲线

easeOut

快速开始，缓慢结束，三次动画曲线

linearToEaseOut

线性开始，缓慢结束，三次动画曲线

easeInOut

缓慢开始，加速，然后缓慢结束的三次动画曲线

fastOutSlowIn

快出慢入

slowMiddle

快速开始、减速然后快速结束的三次动画曲线

bounceIn

幅度增长的振荡曲线。

bounceOut

幅度减小的振荡曲线。

bounceInOut

幅度先增大然后减小的振荡曲线。

elasticIn

一条振荡曲线，其幅度在超过其界限时增长。

elasticOut

一条振荡曲线，其幅度在超过其界限时减少。

elasticInOut

一条振荡曲线，在超出其界限的同时在幅度上增长然后缩小。

easeInSine

缓慢开始，快速结束，三次动画曲线，但是比较温和，很难与linear区分。

easeInQuad，easeInCubic，easeInQuart，easeInQuint，easeInExpo

缓慢开始，快速结束，三次动画曲线，按上述顺序，逐渐陡峭一些。

easeInCirc，easeInBack

缓慢开始，快速结束，三次动画曲线

easeOutSine

快速开始，缓慢结束，三次动画曲线，但是比较温和，很难与linear区分。

easeOutQuad，easeOutCubic，easeOutQuart，easeOutQuint，easeOutExpo

快速开始，缓慢结束，三次动画曲线，按上述顺序，逐渐陡峭一些。

easeOutCirc，easeOutBack

快速开始，缓慢结束，三次动画曲线

easeInOutSine

缓慢开始，加速，然后结束的三次动画曲线，但是比较温和

easeInOutQuad，easeInOutCubic，easeInOutCubicEmphasized，easeInOutQuart，easeInOutQuint，easeInOutExpo，easeInOutCirc

缓慢开始，加速，然后结束的三次动画曲线，按上述顺序，逐渐陡峭一些。

easeInOutBack

缓慢开始，加速，然后结束的三次动画曲线

Tween

开始值和结束值之间的线性插值。通过泛型指定其类型。

begin

开始值

end

结束值

animate

缓动曲线

AnimatedBuilder

用于构建动画的通用小部件。

animation

指定监听哪个动画。

SingleTickerProviderStateMixin

在只有一个动画的时候，可以混入此类，然后将vsync: this传递给动画控制器构造参数。

TickerProvider是Ticker对象的工厂，Ticker是一个对象，可以在每一帧触发一个回调，用于执行动画。

由于只需要一个Ticker，该类的效率比TickerProviderStateMixin高。

Animation

一个T类型的动画。让其他对象监听其值或状态的变化。

AppBar

automaticallyImplyLeading

判断前面是否有其他页面，以自动显示返回按钮。

backgroundColor

背景颜色

标题

IconThemeData? iconTheme

返回按钮的主题

不常用

Material

底层材质小部件。没有什么实际效果，可以用来设置样式。

TextPainter

用于绘制文本

InlineSpan? text

文本

maxLines

最大行数

textDirection

文本方向

layout()

计算文本的视觉位置，在调用之前，[text] 和 [textDirection] 属性必须为非空

InlineSpan

构成段落的一部分内联文本

Semantics

语义小部件，其实大多数情况下没什么用。

namesRoute

节点是否包含路由

是否代表应用程序头部，多用在自定义状态栏

RepaintBoundary

用于直接合成视图，避免重绘

参考：说说Flutter中的RepaintBoundary

MergeSemantics

合并后代语义的小部件。

将子级的所有语义合并为语义树中的一个节点。

posted @ 2022-11-03 08:58 Bin_x 阅读(204) 评论(0) 编辑收藏举报

刷新页面返回顶部

Bin_x

flutter 组件

基本组件

StatefulWidget

生命周期

didUpdateWidget

oldWidget

Scaffold

resizeToAvoidBottomInset

容器

Container

alignment

width

constraints

decoration

SizedBox

SizedBox.shrink()

AspectRatio

aspectRatio

SafeArea

Stack

alignment

ConstrainedBox

DecoratedBox

Spacer

Divider

GridView

GridView.count

crossAxisCount

childAspectRatio

mainAxisSpacing

crossAxisSpacing

ListView

physics

NeverScrollableScrollPhysics

itemExtent

Visibility

maintainState

visible

Listener

behavior

deferToChild

opaque

translucent

按钮

IconButton

tooltip

padding

TextButton

onPressed

元素

Text

maxLines

overflow

ellipsis

textAlign

style

Image

Image.asset

color

表单

Form

autovalidateMode

disabled

always

onUserInteraction

TextFormField/TextField

obscureText

decoration

autovalidateMode

validator

inputFormatters

LengthLimitingTextInputFormatter

FilteringTextInputFormatter

FilteringTextInputFormatter.digitsOnly

TextEditingValue

baseOffset

extentOffset

autofocus

InputDecoration? decoration