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