Flutter学习总结（十、Flutter基本容器)

最新推荐文章于 2024-05-31 11:27:52 发布

wo17796452

最新推荐文章于 2024-05-31 11:27:52 发布

阅读量823

点赞数

分类专栏： Flutter 文章标签： ios android flutter

本文链接：https://blog.csdn.net/wo17796452/article/details/105564005

版权

Flutter 专栏收录该内容

23 篇文章 7 订阅

订阅专栏

Flutter的基本容器

一起从0开始学习Flutter!

Flutter官方并没有对Widget进行官方分类，其实对于容器和布局类型的划分比较纠结，有些感觉不是很明确怎么去划分到哪个部分，先按容器下可以添加子控件的数量作为分类标准，添加多个子控件的为布局，对单个组件进行设置的为容器，如果以后有好的方法再进行调整。
这里分出来的容器有Padding，Align，Positioned，Container，Scaffold，Transform，ConstrainedBox，SizedBox，RotatedBox。容器比较多，来一个一个的学习他们的特点。

1. Padding

容器的内填充，刚一开始看到padding肯定会想到它的好兄弟margin，在Flutter中去除掉了margin的概念，我们只能是通过使用padding来代替margin的实现。
padding
我们需要内填充的大小，这里不是传入具体的数值，需要传入EdgeInsetsGeometry，通过它可以设置填充的位置以及大小。
如果我们只想填充某几个边，不是全部的时候，可以使用EdgeInsets.only，可以根据上下左右来设定。

const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0,
  });

如果我们要设定的是全部，则推荐使用EdgeInsets.all，可以直接设定全部边的内边距。

const EdgeInsets.all(double value)
    : left = value,
      top = value,
      right = value,
      bottom = value;

child
添加内边距的控件

2.Align

子控件相对于父控件的位置，可以回看上篇中的Stack，如果没有指定子控件的位置的话都是根据Stack中的alignment显示的，如果给子控件设定了Align则会摆脱它的束缚。
alignment
子控件位于父容器的位置，默认设置Alignment.center
Alignment.topLeft 子控件位于顶部左上角
Alignment.topCenter 子控件位于顶部中间
Alignment.topRight 子控件位于顶部右边
Alignment.centerLeft 子控件位于中间的左部
Alignment.center 子控件位于中间
Alignment.centerRight 子控件位于中间的右边
Alignment.bottomLeft 子控件位于底部左侧
Alignment.bottomCenter 子控件位于底部的中间
Alignment.bottomRight 子控件位于底部的右边
child
需要指定位置的子控件

3.Positioned

子控件在Stack布局中的位置，相当于绝对定位。
left
距离屏幕左边的距离
top
距离屏幕顶部的距离
right
距离屏幕右边的距离
bottom
距离屏幕底部的距离
width
子控件的宽度
height
子控件的高度
注意： (left,right,width)(top,bottom,height)这两组属性都是只能设置其中的两个，不能三个全部设置！！
child
需要指定位置的子控件

4.Container

是不是觉得上面的各种设置会很麻烦，Container不仅包含了Align和Padding的功能还有一些更强大的功能。
alignment
可以参照Align的设置
padding
可以参照Padding的设置
color
Container的背景色
Flutter内置了丰富的颜色，我们可以直接Colors里面的颜色如：Colors.black，如果有自定义颜色的要求，我们可以Color(0x000000)
decoration
可以设置Container背景的渐变色，圆角和阴影颜色，和color属性之能选择一个设置。
需要传入BoxDecoration(),这个属性我们看基本控件的时候再去了解它。
constraints
设置容器的大小，如果设置了则widht和height的属性会失效
BoxConstraints.tightFor 可以只设置宽高某一个边的大小
BoxConstraints.tight 必须设置宽高的大小
transform
旋转视图通过Matrix4进行设置，常用的方法有：
Matrix4.translationValues 控制控件的移动方向x :水平方向,y ：竖直方向, z：垂直于屏幕，所以看不出来效果，
Matrix4.rotationZ 控制控件的旋转。Matrix4.rotationX和Matrix4.rotationY不常用，都是以侧边为轴进行旋转的操作。rotationX以顶为轴旋转，rotationY以左侧边为轴旋转
foregroundDecoration
在Container上加的遮罩颜色，设置的方式与decoration相同。
width
组件的宽
height
组件的高
margin
这里Container帮助我们实现了margin功能，传值方法同padding的方法，他的值不算在宽高里。
child
需要指定位置的子控件

5.Scaffold

终于到它了，在我们的demo中就看到了它的身影，可以看到他负责了我们整个页面的结构。先了解一下它都给我们准备好了哪些功能。
appBar
就是我们的标题栏，我们需要添加一个AppBar组件，AppBar比较大我们也放到后面看基础组件的时候去了解。最基本的添加一个AppBar我们可以设置

AppBar(title: Text(widget.title),)

body
标题栏下面的整个空间的设置我们都要通过这里进行设置，这里可以添加的我们上一篇提到的布局类。
floatingActionButton
我们在页面上通过点击然后增加数量的按钮就是通过它来显示出来的，我们也将这个控件放到后面基础组件的时候去了解。
floatingActionButtonLocation
设置悬浮按钮显示的位置
FloatingActionButtonLocation.startTop,FloatingActionButtonLocation.miniStartTop 显示在左上角
FloatingActionButtonLocation.endFloat 显示在右下角但是离底部有距离
FloatingActionButtonLocation.endDocked 显示在右下角紧挨着底部
FloatingActionButtonLocation.centerFloat 显示在底部中间但是离底部有距离
FloatingActionButtonLocation.centerDocked 显示在底部中间紧挨着底部
FloatingActionButtonLocation.endTop 显示在右上角
floatingActionButtonAnimator
悬浮按钮的显示隐藏动画，系统内置了FloatingActionButtonAnimator.scaling动画，如果想要自定义动画可以参照FloatingActionButtonAnimator.scaling创建的示例去编写自己喜欢的动画。
persistentFooterButtons
在页面的最底部添加按钮，添加底部切换按钮我们使用bottomNavigationBar,所以一般不会去使用persistentFooterButtons。
drawer和endDrawer
抽屉效果的抽屉布局,只是一个是左抽屉，一个是右抽屉。
里面想要添加的布局可以是我们上一章说的布局类，也可以是容器类。
bottomNavigationBar
这里可以添加我们常用的布局样式，但是我们一般是使用BottomNavigationBar类来设置显示的底部按钮，具体的BottomNavigationBar的介绍我们等讲到基础控件的时候再去详细了解。
bottomSheet
这里的布局会持续的呆在底部，如果软键盘被唤起则跟随软键盘一起升高，常用的场景类似微信的文字输入的底部栏。
backgroundColor
设置底部栏的背景色
resizeToAvoidBottomInset
设置键盘弹起时是否会遮挡底部的布局，false则会进行遮挡，true则不会进行遮挡。
primary
布局开始计算的位置是否包括状态栏，设置为False则会从屏幕的最顶端开始计算，默认值True是从状态栏下开始计算。
drawerDragStartBehavior
处理拖动行为的开始方式，默认是DragStartBehavior.start，替换了DragStartBehavior.down也没有看出来改变是什么。
extendBody
控制body底部的可显示范围是否在bottomNavigationBar和persistentFooterButtons之上，如果设置为True则会直接显示到屏幕的底部，而不是bottomNavigationBar和persistentFooterButtons的上面。
extendBodyBehindAppBar
更上面的类似，这个是控制是否是从屏幕顶部开始显示，而不是从AppBar下面开始显示。
drawerScrimColor
设置当Drawer打开的时候下面内容的遮挡颜色
drawerEdgeDragWidth
设置Drawer可以展开的宽度
我们平时设计APP内的常用控件基本上都帮忙已经预留了位置，我们只需要按需填坑就可以了，还是挺不错的设计。

6.Transform

来设置控件的旋转和偏移。
transform
跟Container中介绍的transform一样，参考上面的设置。
alignment
相对于坐标系原点的对齐方式，对齐方式参照Align的alignment进行设置。
origin
相对于起始位置进行的一个偏移，传入Offset(偏移的X，偏移的Y)。

7.ConstrainedBox

尺寸限定容器，我们可以通过它设定一个控件的最小最大宽度，高度。
minWidth
最小宽度，默认0
maxWidth
最大宽度，默认double.infinity，没有限制
minHeight
最小高度，默认0
maxHeight
最大高度，默认double.infinity，没有限制
child
用于设定的子控件