顶部小部件未出现在堆栈上答案

【问题标题】：Top widget not appearing on Stack顶部小部件未出现在堆栈上
【发布时间】：2021-10-20 18:03:23
【问题描述】：

我目前正在做一个 Flutter Web 项目，我正在尝试复制 Ubuntu 桌面的 UI。目前以这张图片作为参考。

对于背景图片，我使用了 container 小部件和 AssetImage 小部件，如下面的代码块所示。

class UbuntuBackground extends StatelessWidget {
  const UbuntuBackground({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/ubuntu.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

我制作了一个 toy Sidebar 小部件，其中 column 小部件包含 2 个 container 小部件。

class AppSidebar extends StatelessWidget {
  const AppSidebar({Key? key}) : super(key: key);

  static Color sidebarColor = Color(0xff0D486E);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: sidebarColor,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
        ],
      ),
    );
  }
}

然后我想到使用Stack 小部件，以便让AppSidebar 显示在UbuntuBackground 小部件前面。

class UbuntuHomepage extends StatefulWidget {
  UbuntuHomepage({Key? key}) : super(key: key);

  @override
  _UbuntuHomepageState createState() => _UbuntuHomepageState();
}

class _UbuntuHomepageState extends State<UbuntuHomepage> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AppSidebar(),
        UbuntuBackground(),
      ]
    );
  }
}

UbuntuHomepage 也是我的main.dart 文件中指定的应用默认路由。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ubuntu',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UbuntuHomepage(),
    );
  }
}

但是，构建应用程序只会显示UbuntuBackground 小部件，如下面的屏幕截图所示。

这样，我如何将AppSidebar 小部件覆盖在UbuntuBackground 小部件上？

【问题讨论】：

标签： flutter dart flutter-layout flutter-web

【解决方案1】：

AppSidebar()在后台，而是这样试试，

return Stack(alignment: Alignment.centerLeft, children: <Widget>[
      UbuntuBackground(),
      AppSidebar(),
    ]);

在 Stack 中，最后一个小部件将是顶部小部件。

【讨论】：