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

agyaoht7  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(257)

下面的代码有3个按钮和一个容器,容器内有两个定位的小部件,底部定位的小部件包含一个带3个容器的IndexedStack,当我点击按钮时,我希望容器按照代码显示,所有都很好,但容器与其父小部件的顶部对齐,我希望它们与底部中心对齐。
我确实使用了Align小工具来对齐底部中心,但无法使其工作,
我希望最后三个红色,蓝色和绿色的容器对齐到黄色容器的底部,现在它将对齐到中间/中间顶部,只有绿色对齐到底部中心。我如何实现这一点?
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,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
rekjcdws

rekjcdws1#

您需要删除顶部的固定高度,并在黄色小部件之前添加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,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

相关问题