第7章页面布局-IndexStack布局-优快云博客

本文介绍了一个使用Flutter实现的IndexedStack与Stack布局示例，通过设置不同的索引和对齐方式来展示CircleAvatar和自定义文本。示例中包含了亢少军老师的课程和资料介绍，以及相关社区资源。

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

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'IndexedStack布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

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


    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Stack层叠布局示例'),
      ),
      body: new Center(
        child: stack,
      ),
    );
  }
}