Flutter 布局- Stack、IndexedStack、GridView详解

在Flutter中，Stack是一种用于叠加其子widget的布局模型，子widget通过Positionedwidget指定其在Stack中的位置。IndexedStack是一个有状态的widget，它只显示一个子widget，根据一个索引值来确定显示哪一个。GridView是一个网格状的列表，可以水平和垂直滚动。

以下是这些widget的简单示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Layout Example'),
      ),
      body: LayoutDemo(),
    );
  }
}
 
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        CircleAvatar(
          backgroundImage: AssetImage('assets/img1.jpg'),
          radius: 100.0,
        ),
        CircleAvatar(
          backgroundImage: AssetImage('assets/img2.jpg'),
          radius: 60.0,
        ),
        Positioned(
          bottom: 10.0,
          right: 10.0,
          child: Text('Flutter'),
        )
      ],
    );
  }
}
 
class IndexedStackDemo extends StatelessWidget {
  final int index;
  IndexedStackDemo({this.index});
 
  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: index,
      children: <Widget>[
        Center(child: Text('Page 1')),
        Center(child: Text('Page 2')),
        Center(child: Text('Page 3')),
      ],
    );
  }
}
 
class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      children: <Widget>[
        Container(
          child: Image.asset('assets/img1.jpg'),
          color: Colors.green,
        ),
        Container(
          child: Image.asset('assets/img2.jpg'),
          color: Colors.blue,
        ),
        // ... 更多的图片
      ],
    );
  }
}

在这个例子中，LayoutDemo展示了如何使用Stack和Positioned来叠加图片和文字。IndexedStackDemo展示了IndexedStack的使用，可以通过改变其index属性来切换显示不同的页面。GridViewDemo展示了如何使用GridView.count来创建一个具有三列的网格视图，并且可以滚动查看更多的图片。