Fiutter-容器组件一

前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

容器类

所谓容器类就是我们经常使用到的ViewGroup,它决定了内部的容器的排列方式

Row
水平方式排列组件，内部的组件按照水平方式排列

Row(children: [
          Text('text1',style: TextStyle(backgroundColor: Colors.red)),
          Text('text2',style: TextStyle(backgroundColor: Colors.green)),
          Text('text3',style: TextStyle(backgroundColor: Colors.blue)),
        ],)

row1.PNG

mainAxisAlignment
设置主轴的对对齐方式，就是横向的对齐方式
start,
end
center
spaceBetween
spaceAround
spaceEvenly

crossAxisAlignment
设置交叉轴的对齐方式，就是竖向的对齐方式
start
end
center
stretch
baseline

textDirection
设置主轴的方向，默认从左往右

verticalDirection
设置交叉轴的方向，默认从顶部开始

Column
竖向方式排列组件，内部的组件按照竖向方式排列

Column(children: [
          Container(child: Text('text1',style: TextStyle(backgroundColor: Colors.red))),
          Container(child: Text('text2',style: TextStyle(backgroundColor: Colors.green))),
          Container(child: Text('text3',style: TextStyle(backgroundColor: Colors.blue))),
        ], mainAxisAlignment: MainAxisAlignment.start)

column.PNG

Stack
叠加布局，类似于Android常用的帧布局，依次叠加

Stack(children: [
          Container(child: Text('text1',style: TextStyle(backgroundColor: Colors.red),textAlign: TextAlign.center),width: 100,height: 100,color: Colors.red,alignment: Alignment.center,),
          Container(child: Text('text2',style: TextStyle(backgroundColor: Colors.green),textAlign: TextAlign.center),width: 90,height: 90,color: Colors.green,alignment: Alignment.center),
          Container(child: Text('text3',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),width: 80,height: 80,color: Colors.blue,alignment: Alignment.center),
        ], alignment: Alignment.center)

Stack.PNG

IndexedStack
是Stack的子类，可以用来管理只显示某一个层级的子组件

IndexedStack(index: 0,children: [
          Container(child: Text('text1',style: TextStyle(backgroundColor: Colors.red),textAlign: TextAlign.center),width: 100,height: 100,color: Colors.red,alignment: Alignment.center,),
          Container(child: Text('text2',style: TextStyle(backgroundColor: Colors.green),textAlign: TextAlign.center),width: 90,height: 90,color: Colors.green,alignment: Alignment.center),
          Container(child: Text('text3',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),width: 80,height: 80,color: Colors.blue,alignment: Alignment.center),
        ], alignment: Alignment.center)

设置显示第1个组件

Wrap
流布局组件，进行水平会竖直方向的布局，当空间使用完之后自动进行换行，默认为水平方向

Wrap(children: [
          Container(child: Text('喝茶',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('看电影',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('打麻将',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('写代码',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('听歌',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('遛弯',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('火锅',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('中餐',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
          Container(child: Text('跑步',style: TextStyle(backgroundColor: Colors.blue),textAlign: TextAlign.center),margin: EdgeInsets.all(10)),
        ])

wrap1.PNG

Center
将子组件显示在自身居中位置

Center(child: Text('Mike'))

Padding
设置子组件的边距

Padding(child: Text('Mike'),padding: EdgeInsets.all(10))

ConstrainedBox
对子组件设置对应的约束条件

ConstrainedBox(constraints:BoxConstraints(
          minHeight: 100,
          minWidth: 100,
          maxWidth: 100,
          maxHeight: 100
        ),child: Container(child: Text('Mike'),width: 1000,height: 1000,color: Colors.red,))

cons.PNG

SizedBox
限制尺寸大小的盒子，限制了子控件的宽高

SizedBox(
          width: 100,
          height: 100,
          child: Center(
            child: Text('Mike')
          ),
        )

DecoratedBox
可以给子控件增加效果，背景，边框，阴影等

Container(
          child: SizedBox(
            height: 50,
            child: DecoratedBox(
                child: Center(
                  child: Text('Mike'),
                ),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(color: Colors.orange, blurRadius: 10)
                    ],
                    gradient:
                        LinearGradient(colors: [Colors.blue, Colors.green]))),
          ),
          margin: EdgeInsets.fromLTRB(20, 10, 20, 10),
        )

shadow.PNG

Container
只包含一个子组件，可以设置组件的宽高，颜色，装饰，内外边距等，它的功能很强大，是我们最常用的组件之一

  Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

Container中子控件的大小与Alignment的关系
当未设置Alignment时，适配子控件大小

Container(
        color: Colors.red,
        child: Text('Mike',style: TextStyle(backgroundColor: Colors.blue)))

contain_ali.PNG

当设置Alignment时，则会充满父容器

Container(
        alignment: Alignment.center,
        color: Colors.red,
        child: Text('Mike',style: TextStyle(backgroundColor: Colors.blue)))

contain_ali1.PNG

Transform
只是包含一个子控件，可以对子控件进行矩阵变换操作，从而实现平移，旋转，缩放，等功能

Transform({
    Key? key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    Widget? child,
  })

origin 指定子组件做转换的中心点
alignment 对其方式
transformHitTests 点击区域是否也做相应的变换
transform 作相应的矩阵变换

循环移动的效果

class _TestHomePageState extends State {
  double offsetY = 0;

  _TestHomePageState(){
    startDelay();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Transform.translate(offset: Offset(0, offsetY), child: Text('Mike')));
  }

  void move() {
    setState(() {
      offsetY= (offsetY + 10)%500;
    });
  }

  void startDelay() async{
    for(;;){
      await Future.delayed(new Duration(milliseconds: 100));
      move();
    }
  }
}

RotatedBox
其中的子控件可以被旋转，与Transform不同，它是在layout的时候就会对子控件进行旋转，Transform则是在绘制的时候进行旋转，但是此时layout已经确定了，所以下图中的红色部分(Transform)是固定的，绿色部分(RotatedBox)实际所需的空间大小是和旋转一致的

Column(
          children: [
            DecoratedBox(
                child: Transform.translate(
                  offset: Offset(0, 200),
                  child: Text('Mike'),
                ),
                decoration: BoxDecoration(color: Colors.red)),
            DecoratedBox(
              child: RotatedBox(quarterTurns: 3, child: Text('Mike')),
              decoration: BoxDecoration(color: Colors.green),
            )
          ],
        )

rotatedBox.PNG

Flow
自定义布局组件，Flow 组件对使用转换矩阵操作子组件经过系统优化，性能非常高效，可以用来做一些复杂炫酷的UI

class _TestHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Flow(
            children: List.generate(10, (index) {
              return Container(
                child: Text("$index"),
                height: 100,
                width: 100,
                color: Colors.primaries[index % Colors.primaries.length],
              );
            }),
            delegate: MyDelegate()));
  }
}

class MyDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; i++) {
      context.paintChild(i,
          transform: Matrix4.translationValues(10.0 * i, 0, 0));
    }
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return false;
  }
}

flow.PNG

欢迎关注Mike的

Android 知识整理