Flutter IndexedStack

Flutter IndexedStack，IndexedStack继承自Stack，作用是显示第index个child，其他child都是不可见的，所以IndexedStack的尺寸永远是和最大的子节点尺寸一致。由于IndexedStack是继承自Stack的，所以它只比Stack多了一个index属性，即对应child的索引。

这里我们改造Stack布局示例，把Stack组件替换为IndexedStack组件，同时添加index属性值，当将index设置为1时，运行结果只显示“我是超级飞侠”几个字及它的容器。因为CircleAvatar组件索引为0，所以不显示。

示例的完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'IndexedStack布局示例',
    home: MyApp(),
  ));
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = IndexedStack(
      index: 1,//设置索引为1就只显示文本内容了
      alignment: const FractionalOffset(0.2, 0.2),
      children: <Widget>[
        // 索引为0
        CircleAvatar(
          backgroundImage: new AssetImage('images/1.jpeg'),
          radius: 100.0,
        ),
        // 索引为1
        Container(
          decoration: BoxDecoration(
              color: Colors.black38,
          ),
          child: Text(
              '我是超级飞侠',
              style: TextStyle(
                fontSize: 22.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
          ),
        ),
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('IndexedStack布局示例'),
      ),
      body: Center(
        child: stack,
      ),
    );
  }
}

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter Stack/Positioned
• Flutter Stack/Alignment
• Flutter 缩放布局
• Flutter 垂直布局