flutter学习笔记（三）_sliver 布局模型-CSDN博客

本文链接：https://blog.csdn.net/qq_58039700/article/details/148445225

第一章布局原理与约束

1.Flutter布局模型

Flutter中有两种布局模型：基于RenderBox的盒模型布局；基于sliver（RenderSliver）按需加载列表布局。

两种布局方式都需要满足：在任何时候子组件都必须先遵守父组件的约束，在此基础上应用子组件约束。

2.BoxConstraints

BoxConstraints是盒布局模型过程中父渲染对象传递给子轩然对象的约束信息，包含最大宽高信息，子组件大小需要在约束的范围内，BoxConstraints的默认构造函数如下：

const BoxConstraints({
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})

BoxConstrains还定义了一些便捷的构造函数，用于快速生成特定限制规则的BoxConstraints，如BoxConstraints.tight(Size,size)，它可以生成固定宽高的限制；BoxConstraints.expand()可以生成一个尽可能大的用于填充另一个容器的BoxConstraints等。、

3.ConstrainedBox

用于对子组件添加额外的约束。如，你想让子组件的最小高度是80像素，你可以使用const BoxConstraints(minHeight：80.0)作为子组件的约束。

4.SizedBox

用于给子元素指定固定的宽高，如：

SizedBox(
  width: 80.0,
  height: 80.0,
  child: redBox
)

实际上SizedBox只是ConstrainedBox的一个定制

5.UnconstrainedBox

UnconstrainedBox的子组件将不再受到父组件的约束，大小完全取决于自己，此处的‘完全取决于自己’指的是在不影响最终子元素大小的情况下，仍然占有相应的空间。

第二章线性布局

所谓线性布局，即指沿水平或垂直方向排列子组件。Flutter 中通过Row和Column来实现线性布局，类似于Android 中的LinearLayout控件。

1.主轴和纵轴

对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，纵轴就是指垂直方向，反之亦然。

2.Row

Row可以沿水平方向排列其子widget，定义如下：

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

textDirection：表示水平方向子组件的布局顺序（是从左往右还是从右往左），默认为系统当前Locale环境的文本方向（如周继红问，英语都是从左往右）

mainAxisSize：表示Row在主轴（水平）方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子 widgets 实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；而MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的水平空间；

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

verticalDirection：表示Row纵轴（垂直）的对其方式，默认是VerticalDirection.down，表示从上到下

corssAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它得到取值和MainAxisAlignment一样。

3.Column

Column可以在垂直方向排列其子组件。参数和Row一样，不同的是布局方向为垂直，主轴和纵轴正好相反。

4.特殊情况

如果Row里面嵌套Row，或者Column里面嵌套Column，那么只有最外层的Row或Column会占用尽可能大的空间，里面的Column或Row所占用的空间为实际大小

第三章弹性布局

3.1Flex

Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，**因为Row和Column都继承自Flex**，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。接下来我们只讨论Flex和弹性布局相关的属性(其他属性已经在介绍Row和Column`时介绍过了)。

Flex({
  ...
  required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex`中实现了其布局算法。

3.2 Expanded

Expanded 只能作为 Flex 的孩子（否则会报错），它可以按比例“扩伸”Flex子组件所占用的空间。因为 Row和Column 都继承自 Flex，所以 Expanded 也可以作为它们的孩子。

const Expanded({
  int flex = 1, 
  required Widget child,
})

flex参数为弹性系数，如果为 0 或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其 flex 的比例来分割主轴的全部空闲空间。下面我们看一个例子：

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的两个子widget按1：2来占据水平空间  
        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,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100.0,
            //Flex的三个子widget，在垂直方向按2：1：1来占用100像素的空间  
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
                Spacer(
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

第四章流式布局

1.Wrap

Wrap中的大部分属性是和Row中一样的

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})

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

2.Flow

我们一般很少会使用Flow，因为过于复杂，需要自己实现子widget的位置转换，在很多场景下首先要考虑的是Wrap是否满足需求。Flow有如下优点：

性能好；Flow是一个对子组件尺寸以及位置调整非常高效的控件，Flow用转换矩阵在对子组件进行位置调整的时候进行了优化：在Flow定位过后，如果子组件的尺寸或者位置发生了变化，在FlowDelegate中的paintChildren（）方法中调用context.paintChild进行重绘，而context.paintChild在重绘时使用了转换矩阵，并没有实际调整组件位置

灵活：由于我们需要自己实现FlowDelegate的paintChildren()方法，所以我们需要自己计算每一个组件的位置，因此，可以自定义布局策略。

缺点：

使用复杂

Flow不能自适应子组件的大小，必须通过指定父容器大小或实现TestFlowDelegate的getSize返回固定大小

第五章层叠布局

1.Stack

Stack({
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.clipBehavior = Clip.hardEdge,
  List<Widget> children = const <Widget>[],
})

alignment：此参数决定如何去对齐没有定位或部分定位的子组件。所谓部分定位，在这里特指没有在某一个轴上定位

textDirection：和Row，Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右，即从左到右。

fit：此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小

clipBahavior：此属性决定对超出Stack显示空间的部分如何裁剪，clip枚举类中定义了裁剪的方式

2.Positioned

const Positioned({
  Key? key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定需要定位元素的宽度和高度。注意，Positioned的width、height 和其他地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位组件，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理

第六章对齐与相对定位

1.Align

Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

alignment：需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。AlignmentGeometry是一个抽象类，常用子类有Alignment和FractionalOffset

widthFactor和heightFactor是用于确定Align组件本身宽高的属性；

1.1 Alignment

Alignment继承自AlignmentGeometry，表示矩形内的一个点，它有两个属性x，y，分别表示在水平和垂直方向的偏移，Alignment定义如下

Alignment（this.x，this.y）

1.2FractionalOffset

FractionalOffset继承自Alignment，它和Alignment唯一的区别就是坐标原点不同！

FractionalOffset的坐标原点为矩形的左侧顶点，这和布局系统的一致，所以理解起来会比较容易

FractionalOffset的坐标转换公式为：

实际偏移 = (FractionalOffse.x * (parentWidth - childWidth), FractionalOffse.y * (parentHeight - childHeight))

2.Align和Stack对比

Align和Stack都是用于指定子元素相对于父元素的偏移，区别在于Stack可以有多个元素且子元素可堆积，而Align只能有一个元素且不能堆积；并且两者的定位参考系统不同

3.Center组件

center组件的定义如下

class Center extends Align {
  const Center({ Key? key, double widthFactor, double heightFactor, Widget? child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

Center继承自Align，但是并没有继承alignment参数，所以我们可以将Center组件的对齐方式默认为Alignment.center

第七章 LayoutBuilder，AfterLayout

1.LayoutBuilder

1.1基本概念

LayoutBuilder是一个在构建时获取父组件约束信息的组件，它允许开发者在构建子组件时访问当前的布局约束（BoxConstraints），定义如下

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    // 根据约束构建组件
    return Container();
  },
)

1.2核心特性

实时约束获取：在构建时即可获取父组件传递的约束；在约束变化时自动重建（如屏幕旋转，窗口大小改变）
约束信息包含：

maxWidth/minWindth：最大/最小宽度约束

maxHeight/minHeight：最大/最小高度约束

isTight：受否具有确定尺寸

enforce（）：生成新约束的方法

与MediaQuery的区别

使用场景

响应式布局：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return TabletLayout();
    } else {
      return MobileLayout();
    }
  },
)

尺寸自适应：

LayoutBuilder(
  builder: (context, constraints) {
    final childSize = constraints.maxWidth * 0.8; // 使用80%宽度
    
    return Container(
      width: childSize,
      height: childSize,
      color: Colors.blue,
    );
  },
)

高级用法：

组合约束：

LayoutBuilder(
  builder: (context, constraints) {
    final adjustedConstraints = constraints.copyWith(
      maxHeight: constraints.maxHeight * 0.5,
    );
    
    return ConstrainedBox(
      constraints: adjustedConstraints,
      child: ...,
    );
  },
)

滑动布局适配：

CustomScrollView(
  slivers: [
    SliverLayoutBuilder(
      builder: (context, constraints) {
        final scrollOffset = constraints.scrollOffset;
        return SliverAppBar(
          expandedHeight: 200 - scrollOffset.clamp(0, 100),
        );
      },
    ),
  ],
)

2.AfterLayout

2.1基本概念

AfterLayout是一个在布局完成后立即获取子组件位置和尺寸信息的组件（非Flutter内置插件，需引入第三方库或自定义实现）

AfterLayout(
  callback: (RenderAfterLayout ral) {
    final position = ral.localToGlobal(Offset.zero);
    final size = ral.size;
    print('位置: $position, 尺寸: $size');
  },
  child: YourWidget(),
)

2.2核心特性

布局后回调：

在布局阶段完成后触发

在绘制阶段之前执行

可访问的信息

class RenderAfterLayout extends RenderProxyBox {
  Offset get localToGlobal(offset) => // 局部坐标转全局
  Rect get rect => localToGlobal(Offset.zero) & size; // 全局位置矩形
  Size get size => // 组件尺寸
  Matrix4 get transform => // 转换矩阵
}

获取时机

使用场景

获取组件位置：

AfterLayout(
  callback: (ral) {
    final rect = ral.rect;
    print('组件位置: $rect');
  },
  child: TargetWidget(),
)

动态定位浮动元素：

AfterLayout(
  callback: (ral) {
    final position = ral.localToGlobal(Offset.zero);
    floatingElement.position = position;
  },
  child: AnchorWidget(),
)

精确动画起点：

AfterLayout(
  callback: (ral) {
    startPosition = ral.localToGlobal(
      Offset(ral.size.width/2, ral.size.height/2)
    );
    controller.forward(from: 0);
  },
  child: CircleAvatar(),
)

自定义实现原理：

class AfterLayout extends SingleChildRenderObjectWidget {
  final AfterLayoutCallback callback;

  const AfterLayout({Key? key, required this.callback, required Widget child})
      : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderAfterLayout(callback);
  }
}

class RenderAfterLayout extends RenderProxyBox {
  final AfterLayoutCallback callback;
  bool _hasCalled = false;

  RenderAfterLayout(this.callback);

  @override
  void performLayout() {
    super.performLayout();
    
    if (!_hasCalled) {
      _hasCalled = true;
      // 在布局后一帧调用
      WidgetsBinding.instance!.addPostFrameCallback((_) {
        callback(this);
      });
    }
  }
}