Flutter IndexedStack


简介

显示一个子项列表的单个子项。

  • 只显示指定位置的widget,其他的位置的widget不会显示,所以indexedStack的尺寸永远和最大的子节点一样。
  • 显示的子项widget是给到了具体的索引选择出来的widget
  • 如果value 为null,将不显示任何内容

基本用法

index → int

  • 控制显示child的索引
  • ex:可以通过多个图片转化表示状态(正确,错误,警告等)。

实例演示

class StackDefault extends StatelessWidget {
  final int currIndex;

  const StackDefault(this.currIndex) : super();

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: currIndex,
      children: [
//        CircleAvatar(
//          backgroundImage: AssetImage('images/timg.jpeg'),
//          radius: 100.0,
//        ),
//         Image.asset(
//          'images/timg.jpeg',
//          width: 600.0,
//          height: 240.0,
//          fit: BoxFit.cover,
//        ),
        CircleAvatar(
          backgroundColor:  Color(0xfff48fb1),
          radius: 40.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'IndexedStack',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}

class StackIndex extends StatelessWidget {
  final int currIndex;

  const StackIndex(this.currIndex) : super();

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: currIndex,
      children: [
         Icon(
          Icons.update,
          size: 40.0,
          color: Color(0xffe91e63),
        ),
         Icon(
          Icons.access_alarm,
          size: 40.0,
          color: Color(0xffe91e63),
        ),
         Icon(
          Icons.add_alarm,
          size: 40.0,
          color: Color(0xffe91e63),
        ),
         Icon(
          Icons.access_time,
          size: 40.0,
          color: Color(0xffe91e63),
        ),
         Icon(
          Icons.alarm_off,
          size: 40.0,
          color: Color(0xffe91e63),
        ),
      ],
    );
  }
}