Flutter开发：如何将按钮放置在GridView正下方？

问题出在你把按钮放在了bottomNavigationBar中，这个属性是用来设置页面底部的导航栏区域，并非和body内容垂直排列的容器。要让按钮位于GridView下方，你需要把GridView和按钮放在同一个垂直布局组件（比如Column）里，同时保持GridView的高度限制（避免它占用无限高度导致布局溢出）。

修改后的完整代码如下：

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // 原GridView所在的容器
    Container(
      height: 300,
      width: 300,
      margin: const EdgeInsets.only(left: 47.0, top: 20),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView(
          children: [
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.router, size: 40, color: Colors.white),
                  Text("DFGW",
                      style: TextStyle(
                          color: Colors.white, fontSize: 20))
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.route_rounded,
                      size: 40, color: Colors.white),
                  Text("WAN",
                      style: TextStyle(
                          color: Colors.white, fontSize: 20))
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.vpn_lock, size: 40, color: Colors.white),
                  Text("VPN",
                      style: TextStyle(
                          color: Colors.white, fontSize: 20))
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.language, size: 40, color: Colors.white),
                  Text("INTERNET",
                      style: TextStyle(
                          color: Colors.white, fontSize: 20))
                ],
              ),
            ),
          ],
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10),
        ),
      ),
    ),
    // 按钮放在GridView下方
    Padding(
      padding: const EdgeInsets.only(top: 20.0),
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
            backgroundColor: Colors.white,
            fixedSize: const Size(280, 60)),
        child: Text("Start Checking",
            style: TextStyle(
                fontSize: 20.0, color: Colors.black)),
        onPressed: () {},
      ),
    ),
  ],
),
// 移除原来的bottomNavigationBar

关键调整点： #

• 将body内容改为Column，让GridView和按钮垂直排列
• 移除bottomNavigationBar，因为它不是用来和body内容联动布局的
• 给按钮添加Padding调整与GridView的间距，同时优化按钮尺寸使其更协调

内容的提问来源于stack exchange，提问作者Ho3pLi