Flutter入门学习--(20)层布局控件IndexedStack

最新推荐文章于 2024-09-21 12:17:23 发布

原创最新推荐文章于 2024-09-21 12:17:23 发布 · 6.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter IndexedStack

Flutter 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Flutter中IndexedStack控件的使用方法，该控件允许在同一位置展示多个子控件，但每次仅显示其中一个。通过Index属性可以切换显示的子控件。示例代码展示了如何使用IndexedStack同时放置两张图片，并设置只显示第二张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IndexedStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是IndexedStack在同一时刻只能显示子控件中的一个控件，通过Index属性来设置显示的控件，下面的例子中，在IndexedStack放置了2张图片，只显示第二张

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter IndexedStack控件',
        home: Scaffold(
            appBar: AppBar(
              title: Text("FFlutter IndexedStack控件"),
            ),
            body: Container(
              child: new IndexedStack(
                 index: 1,
               alignment: const Alignment(0.6, 0.6),
                children: <Widget>[
                   Image.network("http://pic1.win4000.com/pic/2/4e/f0a80319bd.jpg",fit: BoxFit.fill,),
                   Image.network("http://pic1.win4000.com/pic/d/dc/95bb6142d5_250_350.jpg",fit: BoxFit.fill)
                ],
              ),
            )));
  }
}