Flutter（63）：Layout组件之IndexedStack

Flutter教学目录持续更新中

Github源代码持续更新中

1.IndexedStack介绍

从一个子widget列表中显示单个孩子的Stack，继承自Stack
Stack我们之前已经介绍过了：Flutter（62）：Layout组件之Stack、Positioned

2.IndexedStack属性

• alignment = AlignmentDirectional.topStart：
• textDirection：文本方向
• sizing = StackFit.loose：子组件如何去适应IndexedStack的大小，就是Stack的fit属性，但是在这里sizing属性不会对子组件大小有影响
• index = 0：显示第几个子组件
• children = const []：

3. IndexedStack跟Stack区别

• IndexedStack只能够显示widget列表中单个子组件，默认0位
• IndexedStack的大小在没有父约束的情况下是由内部尺寸最大且不为Positioned子组件决定的；那内部要是没有呢，那就完全依据IndexedStack父控件约束来控制自己的尺寸。
• sizing属性对IndexedStack其实没有什么影响，因为IndexedStack重写了Stack的createRenderObject与updateRenderObject方法，sizing就是就是Stack的fit，再重写方法里面fit没有被赋值，之作用在了debugFillProperties方法上
• IndexedStack在处理溢出组件上就是Clip.hardEdge，不可设置其他的

4.上代码

  _myStackChildren() {
    return [
      Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
      Positioned(
        bottom: 20,
        child: Container(
          width: 80,
          height: 80,
          color: Colors.green,
        ),
      ),
      Container(
        width: 60,
        height: 60,
        color: Colors.cyan,
      ),
      Positioned(
        left: 30,
        top: 80,
        width: 2000,
        height: 20,
        child: Container(
          color: Colors.black,
        ),
      ),
    ];
  }
      body: Container(
        color: Colors.blue,
        child: IndexedStack(
          alignment: AlignmentDirectional.center,
          sizing: StackFit.expand,
          index: 0,
          children: _myStackChildren(),
        ),
      ),

image.png

这里是显示的第0个子组件，大小是50/50；IndexedStack大小是60/60，因为他的大小是由第2个60/60的子组件决定的，Positioned的子组件大小是不会影响到IndexedStack大小的；当然这个情况也是需要在遵循IndexedStack父约束的情况下，IndexedStack首先还是响应父约束的，例如设置父Container宽高为300，那么IndexedStack就是300/300

image.png

那我们再将0，2位置的子组件去掉，只保留Positioned的子组件看看会怎样：

image.png

这样一来IndexedStack撑满了整个父控件Container，这种时候IndexedStack尺寸就是完全由父约束来管理的。

下一节：Layout组件之Flow

Flutter（64）：Layout组件之Flow

Flutter教学目录持续更新中

Github源代码持续更新中