Flutter - 与脚手架堆栈答案

【问题标题】：Flutter - Stack with ScaffoldFlutter - 与脚手架堆栈
【发布时间】：2020-11-19 16:57:51
【问题描述】：

我目前在一个项目中使用带有 BottomNavigationBar 的 Scaffold，并且需要在所有这些之上显示一个单独的小部件。

尝试在构建返回时创建一个 Stack 并将这个小部件和 Scaffold 作为子级，但小部件根本没有显示（根本没有显示）！也没有任何错误消息。

可能出了什么问题？还是有其他方法？（为此目的调用 AlertDialog 不起作用）。

在 Scaffold 的主体上定义 Stack 也不起作用，因为它需要 BottomNavigationBar 的列表。

    Widget build(BuildContext context) {
        var Test = Center(
          child: SizedBox(width: 100, height: 100,
          child: Container(
              color: Colors.blue,
              child: Text("Test"),),),);
      return Stack(
        alignment: Alignment.center,
        children: [
          Test,
          Scaffold(
            appBar: ..... (rest of the code)

【问题讨论】：

标签： flutter flutter-layout flutter-design

【解决方案1】：

这是因为您的 Scaffold 是在您的 Test 小部件上绘制的。 Stack 接受多个孩子并从下到上对它们进行排序。所以第一项是最底部的，最后一项是最顶部的。请尝试以下操作：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Scaffold(
            appBar: AppBar(title: Text('Hi')),
          ),
          TestWidget(),
        ],
      ),
    );
  }
}

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Center(
        child: Text("Test"),
      ),
    );
  }
}

【讨论】：

事实上，Stack 堆的顺序是倒置的，但是在这种情况下倒置小部件的顺序是可行的。感谢您指出这一点！

【解决方案2】：

正如@HBS 所说，问题是由 Stack 排序引起的，但只需更改 Widget 顺序即可解决问题：

Widget build(BuildContext context) {
    var Test = Center(
      child: SizedBox(width: 100, height: 100,
      child: Container(
          color: Colors.blue,
          child: Text("Test"),),),);
  return Stack(
    alignment: Alignment.center,
    children: [
      Scaffold(
        appBar: ..... (rest of the code),
        Test,
        ],

【讨论】：