下面的代码有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,
),
],
),
),
],
),
),
],
),
),
);
}
}
1条答案
按热度按时间rekjcdws1#
您需要删除顶部的固定高度,并在黄色小部件之前添加
Spacer()
小部件,Spacer
小部件将推动其他小部件。并在
IndexedStack
上使用alignment: Alignment.bottomCenter