顶部小部件未出现在 Stack 上

Question

我目前正在做一个 Flutter 网络项目，我正在尝试复制 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,
        ),
      ),
    );
  }
}

我制作了一个玩具 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 小部件上？

Answer 1

AppSidebar()在后台，不如这样试试，

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

在 Stack 中，最后一个小部件将成为最上面的小部件。

顶部小部件未出现在 Stack 上

Top widget not appearing on Stack

dart

flutter

flutter-layout

flutter-web