颤振 如何在顶部，中心和底部设置堆栈小部件子级

Question

屏幕截图

我需要的屏幕截图

如何设置三个堆栈子项， 1.宽高比 2.循环进度指示器 - 中心 3.滑块 - 底部中心

我尝试过顶部中心和底部中心的对齐方式不会改变， 帮助我解决这个问题，我已经附上了屏幕截图和代码。 它就像底部的YouTube视频播放器滑块和中间的播放/暂停

Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
color: Colors.black,
child: AspectRatio(
aspectRatio: 16 / 9,
),
),
Container(
alignment: Alignment.center,
child: Center(
child: CircularProgressIndicator(),
),
),
Container(
alignment: Alignment.bottomCenter,
child: Material(
color: Colors.black,
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.grey,
trackHeight: 2.5,
thumbColor: Colors.red,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 5.0),
overlayColor: Colors.purple.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 5.0),
),
child: Slider(
value: 5,
max: 10,
min: 0,
onChanged: (v) {},
),
),
),
),
],
)

Answer 1

使用Stack小部件中的Positioned小部件来获得所需的结果。下面是一个示例：

Stack(
children: <Widget>[
Positioned(
top/bottom/left/right  // use as desired
child: Container(
color: Colors.black,
child: AspectRatio(
aspectRatio: 16 / 9,
),
),
),
],
);

在此处阅读有关Positioned小部件的更多信息