· 更新于 2020-08-28
Flutter►项目实践

Flutter控件与布局相关

待做

Flutter获取版本号

我们app版本号写在pubspec.yaml里version字段后面。例如version: 1.0.0+3 其中+前面为版本号，后面为构建号。

一、基本设置

1、设置背景颜色/背景图

1.1、设置普通视图的背景色

采用包一层Container，进行对应的color设置。

1
2
3
4
return Container(
  color: Colors.red,										// 设置视图颜色
	child: xxx,
);

1.2、设置页面的背景色

1
2
3
4
5
return Scaffold(
      backgroundColor: Colors.yellow,		// 设置页面背景颜色
      appBar: _appBar(),
      body: _pageWidget(),
    );

2、设置背景图片

2.1、设置普通视图的背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class EmptyView extends StatelessWidget {
  const EmptyView({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(					// 设置视图的背景图/秀视图
        image: new DecorationImage(
          fit: BoxFit.cover,	// 充满容器，可能会被截断。
          image: new NetworkImage(
              'https://randomuser.me/api/portraits/men/43.jpg'),
        ),
      ),
      child: Container(
        color: Colors.red.withOpacity(.5),
        child: Center(
          child: Text(
            "我在图片的上面哦~",
            style: TextStyle(color: Colors.white, fontSize: 33),
          ),
        ),
      ),
    );
  }
}

2.2、设置页面的背景图

设背景图为如上EmptyView，则设置代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      appBar: _appBar(),
      body: _emptyView(),
    );
  }

// 特殊场景：如果你的页面上有TextField等会弹出键盘的视图。因为默认情况下键盘出现时是否应调整主体Scaffold的大小。所以，为了图片能正确显示，我们使用resizeToAvoidBottomInset指定在键盘出现时是否应调整主体的大小。
	@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      resizeToAvoidBottomInset: false,	// 增加此行，指定在键盘出现时不调整主体的大小
      appBar: _appBar(),
      body: _emptyView(),
    );
  }

二、布局

1、充满

默认情况下，大多数组件都会使用尽可能小的空间。所以如果不设置视图的大小的话，其会自动计算大小，只显示对应的大小。所以当你的视图不够大，而你却又想让它充满父视图的话。那应该进行一些对应的设置。

1.1、设置width、height等于父视图大小方式(不建议)

①、如果视图有width和height属性，则直接设置。如Container和Image等。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
return Image(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  image: AssetImage(
  	'lib/commonui/cq-guide-overlay/Resources/bg_背景遮罩.png'),
  fit: BoxFit.fill,
),

return Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  color: Colors.red,
	child: xxx,
);

缺点：需要计算大小，不建议使用。

②、如果该视图没有width和height属性，则我们通过为该视图包一层Container后来设置width、height。
1
2
3
4
5
6
return Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  color: Colors.red,
	child: xxx,
);

1.2、设置constraints方式

如果你不想/不能通过设置width、height属性的方式设置，则你可以构建一层Container或者ConstrainedBox，然后设置constraints的属性。建议两者的选择，使用ConstrainedBox会使得语意更明白。

1
2
3
4
5
6
7
8
9
10
11
12
13
return Container(
  constraints: BoxConstraints(
    minWidth: double.infinity,
    minHeight: double.infinity,
  ),
  color: Colors.red,
	child: xxx,
);

return ConstrainedBox(
	constraints: new BoxConstraints.expand(),
  child: xxx,
),

默认情况下，大多数组件都会使用尽可能小的空间：

ConstrainedBox 让部件可以使用期望的剩余空间。

BoxConstraints.expand 将会让组件使用无限制（所有可用）的空间，除非另有指定。

1
2
3
BoxConstraints.tightFor(width: 80.0,height: 80.0),
// 等价于
BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)

更多

2、图片的显示方式

BoxFit.fill：图显示，显示可能拉伸，充满

3、绝对布局

三、控件

Flutter 自定义组件之列表头悬浮

Flutter笔记-深入分析滑动控件

1
2
3
4
5
6
7
/* 滑动效果
  * AlwaysScrollableScrollPhysics() 总是可以滑动，默认值
  * NeverScrollableScrollPhysics禁止滚动
  * BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
  * ClampingScrollPhysics 包裹内容 不会有回弹
  */
  final ScrollPhysics physics;

三方控件

Flutter 中使用 video_player 播放视频

Flutter 中使用 video_player 播放视频