Flutter控件

chenyiluo
182 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第五天，点击查看活动详情

本篇文章主要是介绍Flutter控件，主要是为开发Flutter提供开篇基础。

 一、基础控件

1.Text

new Text('Text文字',
style: new TextStyle(fontSize: 32.0, color: Colors.red))

2.图片

（1）Icon:系统自带图标

new Icon(Icons.star, color: Colors.red[500])

（2）本地图片

Image.asset()

new Image.asset('images/2.0x/list_img.png',
width: 100, height: 100)

AssetImage

Image(
           width: 100,
           height: 100,
           color: Colors.green,
           image: AssetImage("images/2.0x/list_img.png"), )

（3）网络图片

Image.network()

Image.network(
                    'https://img2.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto',
                    width: 100,
                    height: 100,)

NetworkImage

Image(
                    width: 100,
                    height: 100,
                    image: NetworkImage(
                        "https://img2.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto"),
                  ),

（4）Alignment设置图片位置

topCenter	居中靠上
topRight	右上角
centerLeft	居中靠左
center	居中
centerRight	居中靠右
bottomLeft	居右下角
bottomCenter	居中靠下
bottomRight	居右下角

（5）BoxFit设置大小和图片不吻合时

BoxFit.contain  默认值,保持图片的原始的比例,等比缩放
BoxFit.fill  充满这个容器,会出现拉伸
BoxFit.cover 保持图片大小,超过部分会被裁剪
BoxFit.fitWidth  宽度充满容器，高度等比缩放，图片不会被拉伸，超出部分会被剪裁
BoxFit.fitHeight  高度充满容器，宽度比例缩放，图片不会被拉伸，超出部分会被剪裁。
BoxFit.none  没有设置显示策略，以原始大小居中来显示
BoxFit.scaleDown  当图片资源大于容器的时，效果相当于 BoxFit.none，
                              当组件比图片小时，效果相当于 BoxFit.contain。

3.按钮(xxButton)

（1）普通按钮

常用的普通按钮：

  • RaisedButton：凸起按钮
  • FlatButton：扁平化按钮，平滑按钮，没有阴影，平时文字的点击事件，还可以有波纹效果
  • RawMaterialButton
  • OutlineButton ：带边框的按钮
  • IconButton ：带图标的按钮

常用属性:

onPressed ，一般接收一个方法	必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
child	文本控件
textColor	文本颜色
color	按钮的颜色
disabledColor	按钮禁用时的颜色
disabledTextColor	按钮禁用时的文本颜色
splashColor	点击按钮时水波纹的颜色
highlightColor	点击（长按）按钮后按钮的颜色
elevation	阴影的范围，值越大阴影范围越大
padding	 内边距
shape	设置按钮的形状
minWidth	最小宽度
height	高度

（2）下拉菜单按钮

DropdownButton

（3）悬浮按钮

FloatingActionButton

FloatActionButton.extended

4.输入框(TextField)

UnderlineInputBorder:只有一个下划线的输入框

OutlineInputBorder:圆角矩形边框的输入框

5.单选框(Switch)

RadioButton

6.复选框(CheckBox)

Checkbox

7.表单(Form)

8.滑块

Slider：效果和Seekbar效果基本一致

二、布局类组件

1.线性布局(Column，Row)

(1)Column纵向

Column(
    children: [
    //填充各种控件
    ],
),

(2)Row横向

Row(
    children: [
    //填充各种控件
    ],
),

(3)属性用法

mainAxisAlignment主轴控件方向:

MainAxisAlignment.start：靠左排列。MainAxisAlignment.end：靠右排列。
MainAxisAlignment.center：居中排列。
MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等。
MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。
MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等。

crossAxisAlignment控件方向垂直的轴:

CrossAxisAlignment.start：子组件在 Row 中顶部对齐。
CrossAxisAlignment.end：子组件在 Row 中底部对齐。
CrossAxisAlignment.center：子组件在 Row 中居中对齐。
CrossAxisAlignment.stretch：拉伸填充满父布局。
CrossAxisAlignment.baseline：textBaseline: TextBaseline.alphabetic,与上面搭配使用、否则会报错，居中对齐

textDirection：控件的排列顺序:

TextDirection.ltr：从左往右开始排列。
TextDirection.rtl：从右往左开始排列。

verticalDirection：垂直方向摆放子组件:

VerticalDirection.up：Row 从下至上开始摆放子组件，此时我们看到的底部其实是顶部。
VerticalDirection.down：Row 从上至下开始摆放子组件，此时我们看到的顶部就是顶部。

mainAxisSize：主轴的大小

MainAxisSize.max：相当于 Android 的 match_parent。
MainAxisSize.min：相当于 Android 的 wrap_content。

2.Flex、Expanded(弹性布局)

(1)Flex

Row或Column会方便一些，因为Row和Column都继承自Flex

        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),

            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            )
          ],
        ),

(2)Expanded

可以按比例“扩伸” Row、Column和Flex子组件所占用的空间

3.Wrap|Flow

流式布局：把超出屏幕显示范围会自动折行的布局称为流式布局。

(1)Wrap

直接使用，超过屏幕自动换行。

spacing：主轴方向子widget的间距
runSpacing：纵轴方向的间距
runAlignment：纵轴方向的对齐方式

（2）Flow

需要自己计算，但是性能较好。同时由于是自己计算的，所以换行规则可以自己定。

4.Stack|Positioned

层叠布局：根据距父容器四个角的位置来确定自身的位置）Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

（1）Stack

类似于Android里面的FrameLayout、Web中的绝对定位。

Stack(
              children: [
                Positioned(
                  left: 20,
                  top: 20,
                  child: Container(
                    color: Colors.red,
                    width: 100,
                    height: 100,
                  ),
                ),
                Positioned(
                  right: 20,
                  top: 20,
                  child: Container(
                    height: 100,
                    width: 100,
                    color: Colors.yellow,
                  ),
                ),
              ],
          ),

（2）Positioned

结合Stack使用可以实现绝对定位的效果。

5.Align对齐和相对定位

调整一个子元素在父元素中的位置 推荐。

this.alignment = Alignment.center,

三、滚动类组件

1.SingleChildScrollView

类似于Android中的ScrollView，它只能接收一个子组件。

适用于内容不会超过屏幕太多时使用，不支持基于Sliver的延迟实例化模型。

2.ListView

Android的Listview是类似的都是用于展示列表数据的。

沿一个方向线性排布所有子组件，并且它也可以支持基于Sliver的延迟构建模型。

3.GridView

同样与Android里面的类似。用法也与ListView大致相同。

构建一个二维网格列表。

4.CustomScrollView

多种滚动模型，适用于滚动view结合的控件。

5.Sliver

具有特定滚动效果的可滚动块。

6.滚动控制和监听

ScrollController：

  • 控制可滚动组件的滚动位置。
  • createScrollPosition
  • attach
  • detach

NotificationListener

可滚动组件到widget树根之间任意位置都能监听收到滚动事件时，通知中会携带当前滚动位置和ViewPort的一些信息，而ScrollController只能获取当前滚动位置。

四、功能型组件

1.WillPopScope：导航返回拦截

点击两次过快时可能是误点需要做处理。

2.InheritedWidget：数据共享

  • 全局变量
  • 提供了一种数据在widget树中从上到下传递、共享的方式。
  • 在widget树中数据传递方向是从上到下的，这和Notification的传递方向是相反的。

3.Provider

数据共享

4.Theme：主题

五、容器类组件

1.控件类容器

（1）Scaffold

  • AppBar：导航
  • Drawer：右侧导航
  • BottomNavigationBar：底部导航

（2）使用

Scaffold(
    appBar: AppBar( //导航栏
    title: Text("App Name"), 
    actions: <Widget>[ //导航栏右侧菜单
        IconButton(icon: Icon(Icons.share), onPressed: () {}),],
    ),
    drawer: new MyDrawer(), //抽屉
    bottomNavigationBar: BottomNavigationBar( // 底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),],
    currentIndex: _selectedIndex,
    fixedColor: Colors.blue,
    onTap: _onItemTapped,
    ),
    floatingActionButton: FloatingActionButton( //悬浮按钮
        child: Icon(Icons.add),
        onPressed:_onAdd
    ),
);

2.Padding

其子节点添加填充（留白）

padding: EdgeInsets.fromLTRB(),

3.限制类容器

限制组件的最大最小值，格式如下，一个是限制条件的属性、一个是child放的内容。

（1）Container

用于不仅有尺寸的约束，还有装饰（颜色、边框、等）、内外边距等需求的情况。

是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。

Container内margin和padding都是通过Padding 组件来实现的。EdgeInsets.all(20.0)。

（2）SizedBox

固定宽高。

适用于固定宽高的情况，常用于当作2个组件之间间隙组件。

（3）ConstrainedBox

double.infinity, //无限大

适用于需要设置最大/小宽高，组件大小以来子组件大小，但不能超过设置的界限

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
  child: Container(height: 300, width: 300, color: Colors.red),
)

（4）AspectRatio

固定宽高比的情况。

（5）UnconstrainedBox

用到情况不多，当作ConstrainedBox的子组件可以“突破”ConstrainedBox的限制，超出界限的部分会被截取。

（6）FractionallySizedBox

用于占父组件百分比的情况。

（7）LimitedBox

用于没有父组件约束的情况。

4.装饰类容器

DecoratedBox：

在其子组件绘制前后绘制一些装饰，例如背景，边框，渐变等。

  decoration: BoxDecoration()。

5.变化类

（1）Transform

旋转(rotate)、平移(translate)、缩(scale)

（2）RotatedBox

旋转

（3）Opacity

透明度

6.剪裁函数

  • ClipOval    子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
  • ClipRRect    将子组件剪裁为圆角矩形
  • ClipRect    剪裁子组件到实际占用的矩形大小（溢出部分剪裁）

六、其它控件

1.Stack帧布局

FrameLayout，帧布局，以左上角为起始点，按照子控件的先后顺序，直接覆盖上去，后来居上。

下图是对应的思维导图：

avatar
文章
阅读
粉丝