美文网首页
Fiutter-容器组件一

Fiutter-容器组件一

作者: 盛世光阴 | 来源:发表于2021-09-28 16:41 被阅读0次

前言

FlutterGoogle开源的构建用户界面(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<TestHomePage> {
  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<TestHomePage> {
  @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 知识整理

相关文章

  • Fiutter-容器组件一

    前言 Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用...

  • Fiutter-容器组件二

    前言 Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用...

  • Fiutter- ListView列表组件

    前言 Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用...

  • 微信小程序(四)视图组件

    小程序组件 视图容器 (一) 视图容器 了解小程序组件中的视图容器 明确小程序组件中的视图容器的用途和方法 了解不...

  • react-router

    安装 示例 容器组件 react-router的容器组件,就是最外层包括所有路由的组件,所有路由活动需要在容器组件...

  • Fiutter- App级别组件

    前言 Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用...

  • Fiutter- 手势识别组件

    前言 Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用...

  • Spring注解(@Import)

    @Import[快速给容器中导入一个组件]@Import(要导入到容器中的组件);容器中就会自动注册这个组件,id...

  • 【学习笔记 】React ⑧ react-redux的使用

    UI组件、容器组件、无状态组件 在学习react-redux之前,需要了解UI组件、容器组件和无状态组件的知识。 ...

  • 07.Redux进阶(上)

    UI组件和容器组件 在这个例子中,我们想要分离UI组件和容器组件 无状态组件 因为上面TodoListUI这个组件...

网友评论

      本文标题:Fiutter-容器组件一

      本文链接:https://www.haomeiwen.com/subject/wsmpwltx.html