Flutter的学习之路

六、单子布局、多子布局

2020-11-12  本文已影响0人  爱玩游戏的iOS菜鸟

一、单子布局组件

单子布局组件的含义是其只有一个子组件

比较常用的单子布局组件有：Align、Center、Padding、Container。

1.1 Align组件

在Flutter中，Align也是一个组件，和其他语言有很大的区别(iOS Android中仅仅只是一个属性)

//源码分析
const Align({
  Key key,
  this.alignment: Alignment.center, // 对齐方式，默认居中对齐
  this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
  this.heightFactor, // 高度因子，不设置的情况，会尽可能大
  Widget child // 要布局的子Widget
})

widthFactor和heightFactor作用：

下面演练一下Align:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

1.2 Center组件

通过源码即可看到：Center组件继承自Align，只是将alignment设置为Alignment.center

没啥好讲的，演练一下Center:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      widthFactor: 1,
      heightFactor: 1,
    );
  }
}

1.3 Padding组件

Padding组件在iOS、Android端也是一个属性，但是在Flutter中也是一个Widget

Padding通常用于设置子Widget到父Widget的边距(理解为父组件的内边距或子Widget的外边距)。

//源码分析
const Padding({
  Key key,
  @required this.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
  Widget child,
})

演练一下Padding:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
        style: TextStyle(
          color: Colors.redAccent,
          fontSize: 18
        ),
      ),
    );
  }
}

在EdgeInsets中有很多根据不同的使用场景对应的设置方法

1.4 Container组件

Container组件类似于Android中的View，iOS中的UIView。

如果你需要一个视图，可以设置背景颜色、图像、固定的尺寸、边框、圆角等效果，那么就可以使用Container组件。

1.4.1 Container组件介绍

Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

需要注意的几点：

演练一下Container:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromRGBO(3, 3, 255, .5),
        width: 100,
        height: 100,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
      ),
    );
  }
}
1.4.2 BoxDecoration

Container有一个非常重要的属性 decoration：

//查看源码
const BoxDecoration({
    this.color, // 颜色，会和Container中的color属性冲突
    this.image, // 背景图片
    this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
    this.borderRadius, // 圆角效果
    this.boxShadow, // 阴影效果
    this.gradient, // 渐变效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形变
  })

部分效果演示：

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
                // color: Color.fromRGBO(3, 3, 255, .5),
        width: 150,
        height: 150,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
        decoration: BoxDecoration(
            color: Colors.amber, // 背景颜色
            border: Border.all(
                color: Colors.redAccent,
                width: 3,
                style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.circular(75),// 这里也可以使用.only分别设置
            // shape: BoxShape.circle, // 会和borderRadius冲突
            boxShadow: [
              BoxShadow(
                  offset: Offset(5, 5),
                  color: Colors.purple,
                  blurRadius: 5
              )
            ],
            gradient: LinearGradient(
                colors: [
                  Colors.green,
                  Colors.red
                ]
            )
        ),
      ),
    );
  }
}

上一个章节我们提到可以通过 Container+BoxDecoration来实现圆角图像

二、多子布局组件

在开发中将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至需要进行层叠效果时，就需要使用多子布局组件(Multi-child layout widgets)

比较常用的多子布局组件是Row、Column、Stack

2.1 Flex组件

在学习Row和Column之前，我们先学习主轴和交叉轴的概念。

因为Row是一行排布，Column是一列排布，那么它们都存在两个方向，并且两个Widget排列的方向应该是对立的。

都有主轴(MainAxis)和交叉轴(CrossAxis)的概念：

2.1.1 Row、Colum组件

在前面我们用到过Row、Colum这两个组件，实际上均是继承自Flex组件。

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
  TextDirection textDirection, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
  VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴（垂直）的对齐方向
  TextBaseline textBaseline, // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
  List<Widget> children = const <Widget>[],
})

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

通过定义我们发现，二者是差不多的，所以属性我们放在一块讲解，下面以Row为例，Column基本相似：

mainAxisSize：

mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式

crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式

2.1.2 Expanded

在上图中，如果我们希望三个Container铺满Row剩余的部分，则需要使用Expanded包裹

Expanded有一个很重要的属性flex,默认值为1. 一旦被Expanded包裹，原本设置的width无效，flex即为灵活控件占比

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(flex : 2,child: Container(width: 100,height: 100,color: Colors.red, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Expanded(flex : 1,child: Container(width: 100,height: 100,color: Colors.green, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Container(width: 100,height: 100,color: Colors.blue, child: Align(child: Text('helloWorld'))),
      ],
    );
  }
}

2.2 Stack组件

层叠布局Stack

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})
alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里**特指没有在某一个轴上定位：**left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。

Stack会经常和Positioned一起来使用，Positioned可以决定组件在Stack中的位置，用于实现类似于Web中的绝对定位效果。

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.purple,
          width: 300,
          height: 300,
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊，李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}

注意：Positioned组件只能在Stack中使用。

上一篇下一篇

猜你喜欢

热点阅读