[Flutter]flutter基础之组件基础(十二)

一、CustomScrollView Widget

CustomScrollView 是一个自定义的滚动 Widget 。使用 CustomScrollView 可以实现更为复杂的滚动列表样式。其构造方法如下:

1
const CustomScrollView({
2
  Key key,
3
  //Axis类型可选命名参数,设置沿横轴还是纵轴滚动
4
  Axis scrollDirection = Axis.vertical,
5
  //bool类型可选命名参数,用于设置视图的滚动方向是否为读取方向
6
  bool reverse = false,
7
  //ScrollController类型可选命名参数,控制滚动视图滚动位置的控制器
8
  ScrollController controller,
9
  //bool类型可选命名参数,是否是与父PrimaryScrollController相关联的主滚动视图
10
  bool primary,
11
  //ScrollPhysics类型可选命名参数,滚动视图应如何响应用户输入
12
  ScrollPhysics physics,
13
  //boo类型可选命名参数,crollDirection中滚动视图的范围是否应由正在查看的内容确定
14
  bool shrinkWrap = false,
15
  //Key类型可选命名参数,用于标识在GrowthDirection.forward方向上的第一个Widget
16
  Key center,
17
  //double类型可选命名参数,零滚动偏移量的相对位置,控制中心在视口中对齐的位置
18
  double anchor = 0.0,
19
  //double类型可选命名参数,视口在可见区域之前和之后都有一个区域,用于缓存当用户滚动时将变得可见的项目
20
  double cacheExtent,
21
  //List<Widget>类型可选命名参数,子Widget类别
22
  this.slivers = const <Widget>[],
23
  //int类型可选命名参数,为CustomScrollView中的子列表中Widget提供语义信息的数量
24
  int semanticChildCount,
25
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
26
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
27
})

很多属性在上篇文章的 ListView 部分都有过介绍说明,可自行查看。

Key 是小部件,元素和语义节点的标识符。如果新窗口小部件的键与与该元素关联的当前窗口小部件的键相同,则仅将其用于更新现有元素。在具有相同父元素的 Elements 中,键必须唯一。Key 的子类应该是 LocalKeyGlobalKey 的子类。

sliversList<Widget> 类型,用于设置 CustomScrollView 的子 Widget 列表。需要注意的是,这些子 Widget 必须生成 RenderSliver 对象。这些子 Widget 通常为 SliverAppBarSliverListSliverGridSliverFixedExtentListSliverPadding

SliverAppBar 是与 CustomScrollView 集成在一起使用的应用栏。应用栏由工具栏和其他可能的小部件组成,例如 TabBarFlexibleSpaceBar 。应用程序栏通常使用 IconButton 公开一个或多个常见操作,然后可以选择 PopupMenuButton 来执行不太常见的操作。Sliver 应用程序栏通常用作 CustomScrollView 的第一个子项,它使该应用程序栏与滚动视图集成在一起,以便其高度可以根据滚动偏移量而变化,或浮动在滚动视图中其他内容的上方。

1
const SliverAppBar({
2
  Key key,
3
  //Widget类型可选命名参数,在标题之前显示的Widget
4
  this.leading,
5
  //bool类型可选命名参数,
6
  this.automaticallyImplyLeading = true,
7
  //Widget类型可选命名参数,显示标题的Widget
8
  this.title,
9
  //List<Widget>类型可选命名参数,要在标题小部件后显示的Widget
10
  this.actions,
11
  //Widget类型可选命名参数,堆叠在工具栏和选项卡栏后面的Widget。它的高度将与应用栏的整体高度相同。
12
  //通常为FlexibleSpaceBar
13
  this.flexibleSpace,
14
  //PreferredSizeWidget类型可选命名参数,显示在应用程序栏的底部的Widget。
15
  //通常是一个TabBar。 在应用程序栏的底部只能使用实现PreferredSizeWidget的窗口小部件
16
  this.bottom,
17
  //double类型可选命名参数,当此应用栏位于其他内容上方时的Z坐标。这可控制应用栏下方阴影的大小
18
  this.elevation,
19
  //bool类型可选命名参数,即使内容不在AppBar下滚动,是否显示适合于高程的阴影
20
  this.forceElevated = false,
21
  //Color类型可选命名参数,应用栏材料的颜色。通常,应与亮度,iconTheme,textTheme一起设置
22
  this.backgroundColor,
23
  //Brightness类型可选命名参数,应用栏材质的亮度。通常,这是与背景颜色,图标主题,textTheme一起设置的
24
  this.brightness,
25
  //IconThemeData类型可选命名参数,应用栏图标的颜色,不透明度和大小。通常,
26
  //这是与backgroundColor,brightness,textTheme一起设置的
27
  this.iconTheme,
28
  //IconThemeData类型可选命名参数,用于尾随应用程序栏图标的颜色,不透明度和大小。
29
  //仅当尾随图标的主题主题不同于前导图标时,才应使用此选项
30
  this.actionsIconTheme,
31
  //TextTheme类型可选命名参数,应用栏中用于文本的印刷样式。通常,
32
  //这与亮度backgroundColor,iconTheme一起设置
33
  this.textTheme,
34
  //bool类型可选命名参数,此应用栏是否显示在屏幕顶部
35
  this.primary = true,
36
  //bool类型可选命名参数,标题是否居中显示
37
  this.centerTitle,
38
  //double类型可选命名参数,水平轴上标题内容周围的间距。即使没有前导内容或动作,
39
  //也会应用此间距。如果希望标题占用所有可用空间,请将此值设置为0.0
40
  this.titleSpacing = NavigationToolbar.kMiddleSpacing,
41
  //double类型可选命名参数,应用程序栏完全展开时的大小
42
  this.expandedHeight,
43
  //bool类型可选命名参数,向下滚动时,是否应立即显示该应用程序栏
44
  this.floating = false,
45
  //bool类型可选命名参数,应用栏在滚动视图开始时是否应保持可见
46
  this.pinned = false,
47
  //bool类型可选命名参数,如果对齐和浮动设置为true,则浮动应用程序栏将“捕捉”到视图中
48
  this.snap = false,
49
  //bool类型可选命名参数,应用栏是否应拉伸以填充过度滚动区域
50
  this.stretch = false,
51
  //double类型可选命名参数,激活onStretchTrigger所需的过滚动偏移量
52
  this.stretchTriggerOffset = 100.0,
53
  //AsyncCallback类型可选命名参数,用户过度滚动到StretchTriggerOffset指定的偏移量时要执行的回调函数
54
  this.onStretchTrigger,
55
  //ShapeBorder类型可选命名参数,材料的形状及其阴影
56
  this.shape,
57
})

bottom 用于设置底部工具栏,通常是一个 TabBar ,在应用程序栏的底部只能使用实现 PreferredSizeWidget 的 Widget 。关于 TabBar 的介绍可以查看 http://www.mwpush.com/content/c03861f.html

SliverPadding 是一个可以设置内边距的 Widget 。可以使用 CustomScrollView 进行组合以创建自定义滚动效果。构造方法如下:

1
const SliverPadding({
2
  Key key,
3
  //EdgeInsetsGeometry类型必传参数,设置内边距
4
  @required this.padding,
5
  //Widget类型可选命名参数,子Widget
6
  Widget sliver,
7
})

SliverGridGridView 类似,网格局部的 Widget 。几个构造方法如下:

1
const SliverGrid({
2
  Key key,
3
  //SliverChildDelegate类型必传参数,SliverGrid的子Widget委托
4
  @required SliverChildDelegate delegate,
5
  //SliverGridDelegate类型必传参数,控制子Widget的大小和位置的委托
6
  @required this.gridDelegate,
7
})
8
  
9
//还有其他两个构造方法,与GridView大同小异,可以参考

SliverListListView 类似,线性布局的 Widget 。几个构造方法如下:

1
const SliverList({
2
  Key key,
3
  //SliverChildDelegate类型必传参数,子Widget的委托
4
  @required SliverChildDelegate delegate,
5
})

CustomScrollView 基本使用如下:

1
class MyHomePage extends StatelessWidget {
2
  Key _sKey = Key("c");
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
//      appBar: AppBar(
7
//        title: Text("HomePage"),
8
//      ),
9
      body: Container(
10
        child: CustomScrollView(					//CustomScrollView
11
          center: _sKey,
12
          anchor: 0.0,
13
          slivers: <Widget>[
14
            SliverAppBar(
15
              key: _sKey,
16
              leading: Icon(Icons.markunread),
17
              automaticallyImplyLeading: true,
18
              title: Text("HomePage"),
19
              actions: <Widget>[
20
                Icon(Icons.add),
21
              ],
22
              flexibleSpace: Container(color: Colors.orange,),
23
              floating: true,
24
              pinned: false,
25
              snap: true,
26
              stretch: true,
27
              onStretchTrigger: stretchCallBack,
28
            ),
29
            SliverPadding(padding: EdgeInsets.only(top: 10)),
30
            SliverGrid(
31
              delegate: SliverChildListDelegate(<Widget>[
32
                Container(
33
                  color: Colors.amber,
34
                ),
35
                Container(
36
                  color: Colors.amber,
37
                ),
38
                Container(
39
                  color: Colors.amber,
40
                ),
41
                Container(
42
                  color: Colors.amber,
43
                ),
44
              ]),
45
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
46
                crossAxisCount: 4,
47
                mainAxisSpacing: 10,
48
                crossAxisSpacing: 10,
49
                childAspectRatio: 1,
50
              ),
51
            ),
52
            SliverPadding(padding: EdgeInsets.only(top: 10)),
53
            SliverList(
54
              delegate: SliverChildBuilderDelegate((context, index){
55
                return Padding(
56
                  padding: const EdgeInsets.only(bottom: 10),
57
                  child: Container(
58
                    color: Colors.orange,
59
                    child: ListTile(
60
                      title: Text("标题"),
61
                    ),
62
                  ),
63
                );
64
              }),
65
            ),
66
          ],
67
        ),
68
      ),
69
    );
70
  }
71
}
72
73
Future stretchCallBack() {
74
  print("回调");
75
  return Future.value("result");
76
}

效果如下:

20203301156

二、Flow Widget

Flow 是流式布局 Widget 。它可以实现对子 Widget 大小和位置的设置。构造方法如下:

1
//默认构造方法,创建流式布局
2
Flow({
3
  Key key,
4
  //FlowDelegate类型必传参数,控制子级转换矩阵的委托
5
	@required this.delegate,
6
  //List<Widget>类型可选命名参数,子Widget列表
7
  List<Widget> children = const <Widget>[],
8
})
9
   
10
Flow.unwrapped({
11
  Key key,
12
  //FlowDelegate类型必传参数,控制子级转换矩阵的委托
13
  @required this.delegate,
14
  //List<Widget>类型可选命名参数,子Widget列表
15
  List<Widget> children = const <Widget>[],
16
})

delegateFlowDelegate 类型,委托用来控制流式布局的外观设置。流式布局的大小是由委托的FlowDelegate.getSize 函数独立于子级来确定的。然后,根据 FlowDelegate.GetConstraintsFairld函数的约束条件,独立调整子级的大小。

在绘制阶段,使用 FlowDelegate.paintChildren 函数中的矩阵来定位子对象,而不是在布局过程中定位子对象。可以通过简单地重新绘制流程来有效地重新定位子流程,这在子流程没有再次布局的情况下发生(与 Stack 形成对比,Stack 在布局期间一起进行大小调整和定位)。

FlowDelegate 是一个抽象基类,并且没有提供可用的子类,需要自定义类并继承 FlowDelegate 。继承后必须实现 void paintChildren(FlowPaintingContext context)bool shouldRepaint(FlowDelegate oldDelegate) 方法。

FlowPaintingContextFlowDelegate 绘制的上下文,提供有关容器和子对象的当前大小的信息,以及绘制子对象的机制。其提供了 Size getChildSize(int i)void paintChild(int i, { Matrix4 transform, double opacity = 1.0 }) 方法和两个 get 属性 sizechildCount

Size getChildSize(int i) 根据索引获取 children 中设置的 Widget 的 Size

void paintChild(int i, { Matrix4 transform, double opacity = 1.0 }) 用来根据索引和变化进行对应 Widget 的绘制操作。将在一个坐标系中绘制该子级,该坐标系将容器的坐标系与给定的变换连接在一起。 父级坐标系的原点是父级的左上角,其中x向右增加,y向下方增加。容器会将孩子固定在其边界上。

size 绘制 children Widget 的容器大小。

childCount 绘制 children 的数量。

Flow 基本使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Flow(							//Flow
10
          delegate: MyFlowDelegate(),
11
          children: <Widget>[
12
            Container(
13
              color: Colors.red,
14
              height: 100,
15
              width: 100,
16
            ),
17
            Container(
18
              color: Colors.yellow,
19
              height: 100,
20
              width: 100,
21
            ),
22
            Container(
23
              color: Colors.greenAccent,
24
              height: 100,
25
              width: 100,
26
            ),
27
          ],
28
        ),
29
      ),
30
    );
31
  }
32
}
33
34
class MyFlowDelegate extends FlowDelegate {
35
  @override
36
  void paintChildren(FlowPaintingContext context) {
37
    double dy = 0.0;
38
    for(int i = 0; i < context.childCount; i++) {
39
      dy = (context.getChildSize(i).height + 10) * i;
40
      context.paintChild(i, transform: Matrix4.translationValues(0, dy, 0));
41
    }
42
  }
43
44
  @override
45
  bool shouldRepaint(FlowDelegate oldDelegate) {
46
    return false;
47
  }
48
}

效果如下:

2020330620

官方文档有动态的例子,查看网址:https://api.flutter.dev/flutter/widgets/Flow-class.html

三、SingleChildScrollView Widget

SingleChildScrollView 是一个可滚动的 Widget 。当全部展示内容在视口范围内时,其不可滚动,当超出视口时,其可滚动。有时候由于手机尺寸不同,同一样式的界面在小屏幕手机上展示不完全时,可以使用此 Widget 。比如,其可以与 Column 配合使用,Column 当超出垂直方向范围时,超出部分不可见,配合 SingleChildScrollView 便可以垂直进行滚动操作。SingleChildScrollView 构造方法如下:

1
const SingleChildScrollView({
2
  Key key,
3
  //Axis类型可选命名参数,设置沿横轴还是纵轴滚动
4
  this.scrollDirection = Axis.vertical,
5
  //bool类型可选命名参数,用于设置视图的滚动方向是否为读取方向
6
  this.reverse = false,
7
  //EdgeInsetsGeometry类型可选命名参数,设置内边距
8
  this.padding,
9
  //bool类型可选命名参数,是否是与父PrimaryScrollController相关联的主滚动视图
10
  bool primary,
11
  //ScrollPhysics类型可选命名参数,滚动视图应如何响应用户输入
12
  this.physics,
13
  //ScrollController类型可选命名参数,控制滚动视图滚动位置的控制器
14
  this.controller,
15
  //Widget类型可选命名参数,子Widget
16
  this.child,
17
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
18
  this.dragStartBehavior = DragStartBehavior.start,
19
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: SingleChildScrollView(
10
          padding: EdgeInsets.all(5),
11
          child: Column(
12
            children: <Widget>[
13
              Container(
14
                color: Colors.yellow,
15
                margin: EdgeInsets.only(bottom: 10),
16
                height: 200,
17
              ),
18
              Container(
19
                color: Colors.yellow,
20
                height: 200,
21
                margin: EdgeInsets.only(bottom: 10),
22
              ),
23
              Container(
24
                color: Colors.yellow,
25
                height: 200,
26
                margin: EdgeInsets.only(bottom: 10),
27
              ),
28
              Container(
29
                color: Colors.yellow,
30
                height: 200,
31
                margin: EdgeInsets.only(bottom: 10),
32
              ),
33
            ],
34
          ),
35
        ),
36
      ),
37
    );
38
  }
39
}

效果如下:

2020330948

四、Scrollable Widget

Scrollable 是一个滚动的 Widget 。它为可滚动窗口小部件实现了交互模型,包括手势识别,但对如何显示实际显示子项的视口没有意见。直接构造 Scrollable 很少见。 而是考虑将滚动,视口和布局模型结合在一起的 ListViewGridView 。 要组合布局模型(或使用自定义布局模式),请考虑使用 CustomScrollView

静态 Scrollable.ofScrollable.ensureVisible 函数通常用于与 ListViewGridView 中的 Scrollable 小部件进行交互。

五、ListBody Widget

ListBody 是一个将其子部件沿给定的轴顺序排列,迫使它们位于另一个轴上的父维度。这个小部件很少直接使用。相反,可以考虑使用 ListView (它结合了类似的布局算法和滚动行为)或 Column (它使您能够更灵活地控制一组垂直框的布局)。

六、Scrollbar Widget

Scrollbar 是滚动条 Widget ,用于指示可滚动窗口小部件的哪个部分实际可见。动态更改为类似于iOS平台上的CupertinoScrollbar 的iOS样式滚动条。要将滚动条添加到 ScrollView ,只需将滚动视图小部件包装在 Scrollbar 小部件中。构造方法如下:

1
const Scrollbar({
2
  Key key,
3
  //Widget类型必传参数,要包装的Widget
4
  @required this.child,
5
  //ScrollController类型可选命名参数,用于实现滚动条拖动的滚动条控制器
6
  this.controller,
7
})

实现如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Scrollbar(				//Scrollbar
10
          child: ListView(
11
            children: <Widget>[
12
              Container(
13
                color: Colors.yellow,
14
                margin: EdgeInsets.only(bottom: 10),
15
                height: 200,
16
              ),
17
              Container(
18
                color: Colors.yellow,
19
                height: 200,
20
                margin: EdgeInsets.only(bottom: 10),
21
              ),
22
              Container(
23
                color: Colors.yellow,
24
                height: 200,
25
                margin: EdgeInsets.only(bottom: 10),
26
              ),
27
              Container(
28
                color: Colors.yellow,
29
                height: 200,
30
                margin: EdgeInsets.only(bottom: 10),
31
              ),
32
            ],
33
          ),
34
        ),
35
      ),
36
    );
37
  }
38
}

效果如下:

20203301047

七、SafeArea Widget

SafeArea 一个设置安全区域的 Widget 。它通过足够的填充来插入其子级,以避免操作系统的入侵。例如,这将使孩子缩进足够多的位置,以避免屏幕顶部的状态栏。它还会使孩子缩进必要的数量,以避免在iPhone X上出现缺口或其他类似的创造性外观特征。当指定最小填充时,将应用最小填充或安全区域填充中的较大者。构造方法如下:

1
const SafeArea({
2
  Key key,
3
  //bool类型可选命名参数,是否避免左侧的系统入侵
4
  this.left = true,
5
  //bool类型可选命名参数,是否避免在屏幕顶部(通常是系统状态栏)出现系统入侵
6
  this.top = true,
7
  //bool类型可选命名参数,是否避免右边的系统入侵
8
  this.right = true,
9
  //bool类型可选命名参数,是否避免屏幕底部出现系统入侵
10
  this.bottom = true,
11
  //EdgeInsets类型可选命名参数,最小填充
12
  this.minimum = EdgeInsets.zero,
13
  //bool类型可选命名参数,指定当由当前上下文的MediaQuery的viewInsets占用时,
14
  //SafeArea是否应维护viewPadding而不是填充,默认为false
15
  this.maintainBottomViewPadding = false,
16
  //Widget类型必传参数,子Widget
17
  @required this.child,
18
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: SafeArea(					//SafeArea
10
          child: Container(
11
            color: Colors.red,
12
          ),
13
        ),
14
      ),
15
    );
16
  }
17
}

八、SliverSafeArea Widget

SliverSafeAreaSafeArea 功能相同。构造方法如下:

1
const SliverSafeArea({
2
  Key key,
3
  this.left = true,
4
  this.top = true,
5
  this.right = true,
6
  this.bottom = true,
7
  this.minimum = EdgeInsets.zero,
8
  //Widget类型必传参数,子Widget
9
  @required this.sliver,
10
})

九、CircleAvatar Widget

CircleAvatar 是一个代表用户的圆 Widget 。通常与用户的个人资料图片一起使用,或者在没有此类图片的情况下与用户的姓名缩写一起使用。 为了保持一致,给定用户的姓名缩写应始终与相同的背景色配对。构造方法如下:

1
const CircleAvatar({
2
  Key key,
3
  //Widget类型可选命名参数,子Widget
4
  this.child,
5
  //Color类型可选命名参数,填充圆的颜色。改变背景颜色将会使头像变成新的颜色
6
  this.backgroundColor,
7
  //ImageProvider类型可选命名参数,圆圈的背景图像。改变背景图像将导致化身动画到新图像
8
  this.backgroundImage,
9
  //Color类型可选命名参数,圆圈中文本的默认文本颜色
10
  this.foregroundColor,
11
  //double类型可选命名参数,化身的大小,表示为半径(直径的一半)
12
  this.radius,
13
  //double类型可选命名参数,化身的最大尺寸,表示为半径(直径的一半)
14
  this.minRadius,
15
  //double类型可选命名参数,化身的最小大小,以半径(直径的一半)
16
  this.maxRadius,
17
})

其中,radius 如果不为空,则不能设置 minRadiusmaxRadius ,否则可以,二者只能选择其一。

backgroundImageImageProvider 类型,在 http://www.mwpush.com/content/f0eb3e6d.html 介绍过。有一个错误的地方,那篇文章里写了 ImageProvider 是一个抽象类,不能直接实例化。其有5个直接子类分别为:AssetBundleImageProviderFileImageMemoryImageNetworkImageResizeImage ,可以直接使用,是错误的 AssetBundleImageProvider 也是一个抽象类,不能直接被实例化,需要使用它的子类 AssetImageExactAssetImage 。这里做下更正。

CircleAvatar 使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: CircleAvatar( 				//CircleAvatar
10
          child: Text("MW"),
11
          backgroundColor: Colors.yellow,
12
          foregroundColor: Colors.red,
13
          radius: 50,
14
        )
15
      ),
16
    );
17
  }
18
}

效果如下:

20203311039

十、Chip Widget

Chip 是用长形椭圆表示用户或概念的 Widget ,其可以根据字符的长度增长。构造方法如下:

1
const Chip({
2
  Key key,
3
  //Widget类型可选命名参数,在Chip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,Chip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,Chip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,Chip内边距
10
  this.labelPadding,
11
  //Widget类型可选命名参数,设置onDeleted时显示的图标
12
  this.deleteIcon,
13
  //VoidCallback类型可选命名参数,用户点击deleteIcon删除Chip时调用
14
  this.onDeleted,
15
  //Color类型可选命名参数,删除图标的颜色。默认值基于环境IconTheme.color
16
  this.deleteIconColor,
17
  //String类型可选命名参数,该信息用于Chip的删除按钮工具提示
18
  this.deleteButtonTooltipMessage,
19
  //ShapeBorder类型可选命名参数,Chip的线框形状
20
  this.shape,
21
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
22
  this.clipBehavior = Clip.none,
23
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
24
  this.focusNode,
25
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
26
  this.autofocus = false,
27
  //Color类型可选命名参数,用于未选中的已启用Chip背景的颜色
28
  this.backgroundColor,
29
  //EdgeInsetsGeometry类型可选命名参数,Chip内容和外部形状之间的填充
30
  this.padding,
31
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
32
  this.materialTapTargetSize,
33
  //double类型可选命名参数,相对于其父级应用于Chip的高程
34
  this.elevation,
35
  //Color类型可选命名参数,高程大于0时Chip阴影的颜色
36
  this.shadowColor,
37
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Chip(					//Chip
10
          avatar: Icon(Icons.access_alarm),
11
          label: Text('This is Label text'),
12
          labelStyle: TextStyle(fontSize: 24, color: Colors.red),
13
          labelPadding: EdgeInsets.all(10),
14
          deleteIcon: Icon(Icons.delete),
15
          onDeleted: ()=> print("delete"),
16
          deleteIconColor: Colors.lightBlueAccent,
17
          deleteButtonTooltipMessage: "删除",
18
          backgroundColor: Colors.deepPurpleAccent,
19
          padding: EdgeInsets.all(5),
20
        )
21
      ),
22
    );
23
  }
24
}

效果如下:

20203311107
陌问.MW wechat
欢迎关注微信公众号,及时获取知识!