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

一、Card Widget

Card 是一个有圆角和阴影的卡片 Widget 。通常用于表示某些相关的信息,例如相册,地理位置,联系方式等。其构造方法如下:

1
const Card({
2
  Key key,
3
  //Color类型可选命名参数,卡片背景色
4
  this.color,
5
  //double类型可选命名参数,放置此卡片的z坐标。这可控制卡下方阴影的大小
6
  this.elevation,
7
  //ShapeBorder类型可选命名参数,设置卡片形状
8
  this.shape,
9
  //bool类型可选命名参数,是否在子Widget面前绘制形状边框
10
  this.borderOnForeground = true,
11
  //EdgeInsetsGeometry类型可选命名参数,卡片外边距
12
  this.margin,
13
  //Clip类型可选命名参数,内容将被如何裁剪
14
  this.clipBehavior,
15
  //Widget类型可选命名参数,要显示的Widget
16
  this.child,
17
  //bool类型可选命名参数,这个小部件表示单个语义容器,还是如果为false,则表示单个语义节点的集合
18
  this.semanticContainer = true,
19
})

其中 shape 是一个 ShapeBorder 类型,如果不设置或为 null ,则使用 ThemeData.cardTheme.shape 。如果其也为 null ,则形状将为 RoundedRectangleBorder ,圆角半径为 4.0。ShapeBorder 是一个形状轮廓的基类,是一个抽象类,可以使用其子类设置不同的形状,常用有如下:

1
CircleBorder //圆形
2
RoundedRectangleBorder  //圆角矩形
3
ContinuousRectangleBorder   //连续矩形
4
BeveledRectangleBorder  //斜角矩形

clipBehaviorClip 类型,用于设置内容将被如何裁剪。如果为 null ,则使用ThemeData.cardTheme.clipBehavior 。 如果其也为 null ,则行为将为 Clip.none

Card 的默认就是有简单圆角和小阴影的 Widget ,使用如下:

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
        height: 300,
10
        width: 300,
11
        child: Card(					 //Card
12
          color: Colors.yellow,
13
          elevation: 10,       //为了观察,设置了较大的阴影
14
        ),
15
      ),
16
    );
17
  }
18
}

效果如下:

202023291142

其实属性设置如下:

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: Card(								//Card
10
          color: Colors.yellow,
11
          shape: CircleBorder(),
12
          borderOnForeground: true,
13
          margin: EdgeInsets.all(20),
14
          clipBehavior: Clip.hardEdge,
15
          child: Text("hello", style: TextStyle(fontSize: 160),)
16
        ),
17
      ),
18
    );
19
  }
20
}

效果如下:

20203291221

二、GridView Widget

GridView 是一个可滚动的二维网格布局的 Widget 。可通过设置滚动方向设置横向或纵向。

1
//默认构造方法,创建一个可滚动的二维网格布局Widget
2
GridView({
3
  Key key,
4
  //Axis类型可选命名参数,设置沿横轴还是纵轴滚动
5
  Axis scrollDirection = Axis.vertical,
6
  //bool类型可选命名参数,用于设置视图的滚动方向是否为读取方向
7
  bool reverse = false,
8
  //ScrollController类型可选命名参数,控制滚动视图滚动位置的控制器
9
  ScrollController controller,
10
  //bool类型可选命名参数,是否是与父PrimaryScrollController相关联的主滚动视图
11
  bool primary,
12
  //ScrollPhysics类型可选命名参数,滚动视图应如何响应用户输入
13
  ScrollPhysics physics,
14
  //boo类型可选命名参数,crollDirection中滚动视图的范围是否应由正在查看的内容确定
15
  bool shrinkWrap = false,
16
  //EdgeInsetsGeometry类型可选命名参数,设置内边距
17
  EdgeInsetsGeometry padding,
18
  //SliverGridDelegate类型必传参数,控制GridView中子级的布局
19
  @required this.gridDelegate,
20
  //bool类型可选命名参数,是否将每个子Widget都包装在AutomaticKeepAlive组件中
21
  bool addAutomaticKeepAlives = true,
22
  //bool类型可选命名参数,是否将每个子Widget都包装在RepaintBoundary组件中
23
  bool addRepaintBoundaries = true,
24
  //bool类型可选命名参数,是否将每个子Widget都包装在IndexedSemantics组件中
25
  bool addSemanticIndexes = true,
26
  //double类型可选命名参数,视口在可见区域之前和之后都有一个区域,用于缓存当用户滚动时将变得可见的项目
27
  double cacheExtent,
28
  //List<Widget>类型可选命名参数,要显示的Widget列表
29
  List<Widget> children = const <Widget>[],
30
  //int类型可选命名参数,为GridView中的子列表中Widget提供语义信息的数量
31
  int semanticChildCount,
32
})
33
34
//按需创建一个可滚动的二维网格布局Widget  
35
GridView.builder({
36
  Key key,
37
  //SliverGridDelegate类型必传参数,控制GridView中子级的布局
38
  @required this.gridDelegate,
39
  //IndexedWidgetBuilder类型必传参数,为给定索引创建Widget
40
  @required IndexedWidgetBuilder itemBuilder,
41
  //int类型可选命名参数,创建Widget的个数
42
  int itemCount,
43
  //省略与GridView相同部分
44
})
45
46
//创建小部件的可滚动网格Widget,并在横轴上具有固定数量的图块  
47
const GridView.custom({
48
  Key key,,
49
  //SliverGridDelegate类型必传参数,控制GridView中子级的布局
50
  @required this.gridDelegate,
51
  //SliverChildDelegate类型必传参数,用于设置其子Widget的委托
52
  @required this.childrenDelegate,
53
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
54
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
55
  //省略与GridView相同部分  
56
})
57
58
//根据给定的数量创建小部件的可滚动网格Widget,在横轴上具有固定数量的图块  
59
GridView.count({
60
  Key key,
61
  //int类型必传参数,次轴上子Widget的数量
62
  @required int crossAxisCount,
63
  //double类型可选命名参数,主轴上每个子Widget的间距
64
  double mainAxisSpacing = 0.0,
65
  //double类型可选命名参数,次轴上每个子Widget的间距
66
  double crossAxisSpacing = 0.0,
67
  //double类型可选命名参数,每个子Widget在次轴与主轴上的范围比例
68
  double childAspectRatio = 1.0,
69
  //List<Widget>类型可选命名参数,设置要显示的Widget列表
70
  List<Widget> children = const <Widget>[],
71
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
72
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
73
  //省略与GridView相同部分
74
})
75
  
76
//根据给定的最大范围值创建一个带有小块的可滚动网格Widget,每个小块具有最大跨轴范围的图块  
77
GridView.extent({
78
  Key key,
79
  //double类型必传参数,在主滚动方向上每个子Widget的最大取值范围
80
  @required double maxCrossAxisExtent,
81
  //double类型可选命名参数,主轴上每个子Widget的间距
82
  double mainAxisSpacing = 0.0,
83
  //double类型可选命名参数,次轴上每个子Widget的间距
84
  double crossAxisSpacing = 0.0,
85
  //double类型可选命名参数,每个子Widget在次轴与主轴上的范围比例
86
  double childAspectRatio = 1.0,
87
  //List<Widget>类型可选命名参数,设置要显示的Widget列表
88
  List<Widget> children = const <Widget>[],
89
	//DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
90
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
91
  //省略与GridView相同部分
92
})

GridViewListView 很多属性相同,同样的属性这里就不再做说明,可以查看上一篇文章关于 ListView 的介绍。使用方式也大同小异,使用默认的构造可以实现其他构造的全部形态,使用具体的命名构造可以更快更方的创建出所需的网格布局 Widget 。

gridDelegateSliverGridDelegate 类型,用于设置 GridView 的布局。它是一个抽象类,需要使用其子类,SliverGridDelegateWithFixedCrossAxisCountSliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount 用于在次轴方向上创建固定数量的图块布局。如果网格是垂直的,则此委托将创建具有固定列数的布局。 如果网格是水平的,则此委托将创建一个具有固定行数的布局。该委托创建具有相等大小和间距的图块的网格。构造方法如下:

1
const SliverGridDelegateWithFixedCrossAxisCount({
2
  //int类型必传参数,次轴上子Widget的数量
3
  @required this.crossAxisCount,
4
  //double类型可选命名参数,主轴上每个子Widget的间距
5
  this.mainAxisSpacing = 0.0,
6
  //double类型可选命名参数,次轴上每个子Widget的间距
7
  this.crossAxisSpacing = 0.0,
8
  //double类型可选命名参数,每个子Widget在次轴与主轴上的范围比例
9
  this.childAspectRatio = 1.0,
10
})

SliverGridDelegateWithMaxCrossAxisExtent 用于设置在次轴方向上设置每个子 Widget 的最大取值范围。例如,如果网格是垂直的,网格的宽度为500.0像素,maxCrossAxisExtent 为 150.0,则此委托将创建一个包含 4 列,宽度为 125.0 像素的网格。

1
const SliverGridDelegateWithMaxCrossAxisExtent({
2
  //double类型必传参数,在主滚动方向上每个子Widget的最大取值范围
3
  @required this.maxCrossAxisExtent,
4
  //double类型可选命名参数,主轴上每个子Widget的间距
5
  this.mainAxisSpacing = 0.0,
6
  //double类型可选命名参数,次轴上每个子Widget的间距
7
  this.crossAxisSpacing = 0.0,
8
  //double类型可选命名参数,每个子Widget在次轴与主轴上的范围比例
9
  this.childAspectRatio = 1.0,
10
})

GridView 使用如下:

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: GridView(				//GridView
10
          padding: EdgeInsets.all(10),
11
          scrollDirection: Axis.vertical,
12
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
13
            crossAxisCount: 2,
14
            mainAxisSpacing: 10,
15
            crossAxisSpacing: 10,
16
            childAspectRatio: 1,
17
          ),
18
          children: <Widget>[
19
            Container(
20
              color: Colors.yellow,
21
            ),
22
            Container(
23
              color: Colors.yellow,
24
            ),
25
            Container(
26
              color: Colors.yellow,
27
            ),
28
            Container(
29
              color: Colors.yellow,
30
            ),
31
          ],
32
        ),
33
      ),
34
    );
35
  }
36
}

效果如下:

2020329242

由于 GridViewListView 使用方式大同小异,这里不多做介绍了。

三、PageView Widget

PageView 也是一个可以滚动的列表,它是按页滚动的 Widget 。页面视图的每个子视图都必须与视口具有相同的大小。构造方法如下:

1
PageView({
2
  Key key,
3
  //Axis类型可选命名参数,设置沿横轴还是纵轴滚动
4
  this.scrollDirection = Axis.horizontal,
5
  //bool类型可选命名参数,用于设置视图的滚动方向是否为读取方向
6
  this.reverse = false,
7
  //PageController类型可选命名参数,页面控制器
8
  PageController controller,
9
  //ScrollPhysics类型可选命名参数,滚动视图应如何响应用户输入
10
  this.physics,
11
  //bool类型可选命名参数,设置为false可禁用页面捕捉,这对于自定义滚动行为很有用,用于设置是否按页滚动
12
  this.pageSnapping = true,
13
  //ValueChanged<int>类型可选命名参数,是一个无返回值的回调方法
14
  this.onPageChanged,
15
  //List<Widget>类型可选命名参数,要显示的页面Widget列表
16
  List<Widget> children = const <Widget>[],
17
  ////DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
18
  this.dragStartBehavior = DragStartBehavior.start,
19
})

PageController 是页面控制器,可以操纵在 PageView 中可见的页面。 除了能够控制 PageView 内部内容的像素偏移量之外,PageController 还使您可以按页面(即视口大小的增量)来控制偏移量。

1
PageController({
2
  //int类型可选命名参数,首次创建PageView时显示的页面
3
  this.initialPage = 0,
4
  //bool类型可选命名参数,使用PageStorage保存当前页面,如果重新创建此控制器的可滚动页面,则将其还原
5
  this.keepPage = true,
6
  //double类型可选命名参数,每个页面应占据的视口比例
7
  this.viewportFraction = 1.0,
8
})

PageView 基本使用方法如下:

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: PageView(						//PageView
9
        onPageChanged: (int index) => print(index),
10
        scrollDirection: Axis.horizontal,
11
        pageSnapping: true,
12
        controller: PageController(initialPage: 1),
13
        children: <Widget>[
14
          Container(
15
            child: Center(
16
              child: Text("第一页"),
17
            ),
18
          ),
19
          Container(
20
            child: Center(
21
              child: Text("第二页"),
22
            ),
23
          ),
24
          Container(
25
            child: Center(
26
              child: Text("第三页"),
27
            ),
28
          )
29
        ],
30
      ),
31
    );
32
  }
33
}

效果如下:

2020329525

四、FlutterLogo Widget

FlutterLogo 是一个展示 Flutter 系统图标的 Widget 。构造方法如下:

1
const FlutterLogo({
2
  Key key,
3
  //double类型可选命名参数,logo的尺寸
4
  this.size,
5
  //MaterialColor类型可选命名参数,用来设置绘制logo的颜色
6
  this.colors,
7
  //Color类型可选命名参数,logo文本颜色
8
  this.textColor = const Color(0xFF616161),
9
  //FlutterLogoStyle类型可选命名参数,是否以及在何处绘制“ Flutter”文本。 默认情况下,仅绘制logo。
10
  this.style = FlutterLogoStyle.markOnly,
11
  //Duration类型可选命名参数,如果更改了样式,颜色或textColor属性,则动画的时长
12
  this.duration = const Duration(milliseconds: 750),
13
  //Curve类型可选命名参数,logo动画的曲线(如果样式,颜色,用于文本的颜色发生更改)
14
  this.curve = Curves.fastOutSlowIn,
15
})

MaterialColor 用来定义单一颜色以及具有十种阴影的色样。颜色的阴影由索引引用。指数越大,颜色越深。有10个有效索引:50、100、200,…,900。此颜色的值应与索引 500 和 shade500 的值相同。其构造方法如下:

1
const MaterialColor(
2
  //int类型必传参数,32位ARGB颜色值,主色
3
  int primary,
4
  //Map<int, Color>类型必传参数,用于定义10中不同的颜色深度
5
  Map<int, Color> swatch
6
)

primary 应为色板中值之一的 32 位 ARGB 值,该值将传递给该相同颜色的新Color构造函数,并按值公开。 (这与样本中颜色的特定索引不同。)

MaterialColor 定义方法如下:

1
Map<int, Color> color =
2
{
3
  50 : Color(0xFFFF8888),
4
  100 : Color(0xFFFb7A7A),
5
  200 : Color(0xFFFB6868),
6
  300 : Color(0xFFFC5353),
7
  400 : Color(0xFFFD3C3C),
8
  500 : Color(0xFFFC2929),
9
  600 : Color(0xFFFC2121),
10
  700 : Color(0xFFFB1B1B),
11
  800 : Color(0xFFFB0F0F),
12
  900 : Color(0xFFFB0000),
13
};
14
15
MaterialColor(0xFFFC2121, color)

FlutterLogoStyle 用于设置绘制 logo 的样式,是一个枚举类型值,如下:

1
enum FlutterLogoStyle {
2
  //仅显示logo图标
3
  markOnly,
4
5
  //在左侧显示Flutter的logo,在其右侧显示“ Flutter”标签
6
  horizontal,
7
8
  //在“ Flutter”标签上方显示Flutter的logo
9
  stacked,
10
}

FlutterLogo 使用如下:

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: FlutterLogo(						//FlutterLogo
10
          size: 100,
11
          colors: MaterialColor(0xFFFC2121, {
12
            50 : Color(0xFFFF8888),
13
            100 : Color(0xFFFb7A7A),
14
            200 : Color(0xFFFB6868),
15
            300 : Color(0xFFFC5353),
16
            400 : Color(0xFFFD3C3C),
17
            500 : Color(0xFFFC2929),
18
            600 : Color(0xFFFC2121),
19
            700 : Color(0xFFFB1B1B),
20
            800 : Color(0xFFFB0F0F),
21
            900 : Color(0xFFFB0000),
22
          }),
23
          textColor: Colors.amber,
24
          style: FlutterLogoStyle.horizontal,
25
        ),
26
      ),
27
    );
28
  }
29
}

效果如下:

2020329902

五、Placeholder Widget

Placeholder 是一个占位符 Widget 。它绘制一直框,表示未来的时间将替换为其他 Widget 。默认情况下,占位符的大小适合其容器。如果占位符在无限制的空间中,它将根据给定的 fallbackWidthfallbackHeight 自行调整大小。构造方法如下:

1
const Placeholder({
2
  Key key,
3
  //Color类型可选命名参数,占位符线框颜色
4
  this.color = const Color(0xFF455A64), // Blue Grey 700
5
  //double类型可选命名参数,占位符框中的线宽
6
  this.strokeWidth = 2.0,
7
  //double类型可选命名参数,占位符处于无界宽度情况下要使用的宽度
8
  this.fallbackWidth = 400.0,
9
  //double类型可选命名参数,占位符处于高度不受限制的情况下使用的高度
10
  this.fallbackHeight = 400.0,
11
})

使用如下:

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: Placeholder(						//Placeholder
10
          color: Colors.amber,
11
          strokeWidth: 10,
12
          fallbackHeight: 100,
13
          fallbackWidth: 100,
14
        ),
15
      ),
16
    );
17
  }
18
}

效果如下:

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