Flutter 应用程序在导航栏后面展开

Question

经过几个小时的反复试验，我放弃了。有人能告诉我为什么我的应用程序在虚拟导航按钮后面展开吗？

我尝试切换和插入 SafeArea、Flex、Expanded 等，但没有找到导致此行为的 Widget。

我的代码：

  Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    // direction: Axis.vertical,
    children: [
      Expanded(
        flex: 1,
        // child:Text("test text", style: TextStyle(backgroundColor: Colors.blue),)
        child: Container(
            // color: Colors.red,
            alignment: Alignment.centerRight,
            // padding: EdgeInsets.all(0),
            child: TextField(
              controller: _input_controller,
              decoration: const InputDecoration(
                focusedBorder: InputBorder.none,
                border: InputBorder.none,
              ),
              style: TextStyle(fontSize: _font_size),
              textAlign: TextAlign.right,
              showCursor: false,
              readOnly: true,
              // decoration: InputDecoration(labelText: "Enter your number"),
              // keyboardType: TextInputType.number,
              // inputFormatters: [
              //   // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
              //   // FilteringTextInputFormatter.allow(RegExp(r"[.,']")),
              //   CardFormatter
              // ], // Only numbers can be entered
            )),
      ),
      Expanded(
        flex: 1,
        // child:Text("test text", style: TextStyle(backgroundColor: Colors.blue),)
        child: Container(
            // color: Colors.red,
            alignment: Alignment.centerRight,
            // padding: EdgeInsets.all(0),
            child: TextField(
              controller: _answer_controller,
              decoration: const InputDecoration(
                focusedBorder: InputBorder.none,
                border: InputBorder.none,
              ),
              style: TextStyle(fontSize: _font_size),
              textAlign: TextAlign.right,
              showCursor: false,
              readOnly: true,
              // decoration: InputDecoration(labelText: "Enter your number"),
              // keyboardType: TextInputType.number,
              // inputFormatters: [
              //   // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
              //   // FilteringTextInputFormatter.allow(RegExp(r"[.,']")),
              //   CardFormatter
              // ], // Only numbers can be entered
            )),
      ),
      Expanded(
        flex: 4,
        // child:Text("test text", style: TextStyle(backgroundColor: Colors.green),)
        child: GridView.count(
            crossAxisCount: 4,
            // padding: const EdgeInsets.all(0.2),
            mainAxisSpacing: 0,
            crossAxisSpacing: 0,
            children: List.generate(
                20,
                (i) => Container(
                      child: TextButton(
                        onPressed: () {
                          print(i);
                        },
                        child: Text(i.toString()),
                      ),
                    ))),
      )
    ],
  ),
);
  }        crossAxisSpacing: 0,
                        children: List.generate(
  20,
  (i) => Container(
        child: TextButton(
          onPressed: () {
            print(i);
          },
          child: Text(i.toString()),
        ),
      )),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
    
  }

Answer 1

问题是您的屏幕高度没有覆盖整个小部件的高度。这就是 GridView 在屏幕后面的原因。如果向下滚动，您将获得按钮的其余部分。你可以玩childAspectRatio来降低高度。

如果您希望所有内容都在屏幕中，您可以使用 Stack 和 LayoutBuilder 来测量屏幕尺寸。但是小屏幕有滚动效果很好，但我更喜欢完整的滚动体，在这种情况下，你可以在 body 上使用 SingleChildScrollView，在 gridView 上使用 NeverScrollableScrollPhysics()。

你可以查看我的 repo 我一年前测试过的。

Answer 2

一如既往，当你提问时，你很快就会自己得到答案（有 Chance 的提示）

将 GridView 放在 Expanded 中会导致此行为，如果将 GridView 放在 Container 中，则会出现断言错误，将 shrinkWrap: true 添加到 GridView 的构造函数中，一切都会按预期进行：

Widget build(BuildContext context) {
  return Scaffold(
      body: Column(
    children: [
      Expanded(flex: 1, child: Text("Text1")),
      Expanded(flex: 1, child: Text("Text1")),
      Container(
        child: GridView.count(
            crossAxisCount: 4,
            mainAxisSpacing: 0,
            crossAxisSpacing: 0,
            shrinkWrap: true,
            children: List.generate(
                20,
                (i) => Container(
                      child: TextButton(
                        onPressed: () {
                          print(i);
                        },
                        child: Text(i.toString()),
                      ),
                    ))),
      )
    ],
  ));
}

Flutter 应用程序在导航栏后面展开

Flutter app expanding behind navigation bar

flutter

flutter-dependencies

flutter-android