Flutter

Question

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

尝试在构建 return 上创建 Stack 并将此小部件和脚手架作为子部件放置，但小部件根本不显示（根本不显示）！也没有任何错误信息。

有什么问题吗？或者还有其他方法吗？（为此目的调用 AlertDialog 无效）。

在脚手架主体上定义 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)

Answer 1

这是因为您的脚手架是在您的测试小部件上绘制的。 Stack 接受多个 children 并从下到上对它们进行排序。所以第一项是 bottom-most，最后一项是 top-most。请尝试以下操作：

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"),
      ),
    );
  }
}

Answer 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,
        ],

Flutter - 堆栈与脚手架

Flutter - Stack with Scaffold

flutter-layout

flutter-design