如何将 IndexedStack 小部件的子级与其封闭小部件的底部对齐？

Question

下面的代码有 3 个按钮和一个容器，容器内有两个定位的小部件， 底部定位的小部件包含一个带有 3 个容器的 IndexedStack，当我单击按钮时，我希望容器按照代码显示，一切正常，但容器与其父小部件的顶部对齐，我希望它们对齐底部中心。

我确实使用了对齐小部件来对齐底部中心，但无法让它工作，

我希望最后三个带有红色、蓝色和绿色的容器与黄色容器的底部对齐，现在它将向中间/中间顶部对齐，只有绿色与底部中心对齐。 我怎样才能做到这一点？

DART PAD

import 'package:flutter/material.dart';

class Istack extends StatefulWidget {
  @override
  _IstackState createState() => _IstackState();
}

class _IstackState extends State<Istack> {
  int _selectedIndex = 0;

  void _showContainer(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 600,
        // color: Colors.purpleAccent,
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: () => _showContainer(0),
              child: const Text('Show Container 1'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(1),
              child: const Text('Show Container 2'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(2),
              child: const Text('Show Container 3'),
            ),
            Container(
              color: Colors.yellow,
              height: 400,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    child: Container(
                      color: Color.fromARGB(255, 222, 136, 136),
                      height: 200,
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: IndexedStack(
                      index: _selectedIndex,
                      children: <Widget>[
                        Container(
                          height: 50,
                          color: Colors.red,
                        ),
                        Container(
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          height: 300,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您需要删除顶部的固定高度并在黄色小部件之前添加 Spacer() 小部件，Spacer 小部件将推动其他小部件。

并在IndexedStack上使用alignment: Alignment.bottomCenter

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // color: Colors.purpleAccent,
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: () => _showContainer(0),
              child: const Text('Show Container 1'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(1),
              child: const Text('Show Container 2'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(2),
              child: const Text('Show Container 3'),
            ),
            Spacer(),
            Container(
              color: Colors.yellow,
              height: 400,
              alignment: Alignment.bottomCenter,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    child: Container(
                      color: Color.fromARGB(255, 222, 136, 136),
                      height: 200,
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: IndexedStack(
                      alignment: Alignment.bottomCenter
                      index: _selectedIndex,
                      children: <Widget>[
                        Container(
                          height: 50,
                          color: Colors.red,
                        ),
                        Container(
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          height: 300,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }