顫振中父容器頂部的Gridview間距額外區域

我正在創建一個洗牌游戲，為此，我設定了 3 個級別的網格，

我拿了一個 300x300 的固定大小的容器，我不想改變它的大小，

在這里，我想將所有網格按鈕正確地放置在網格內，但我在網格視圖的頂部獲得了空間，因此，按鈕沒有正確顯示。

這是我的代碼

final kdecoration = BoxDecoration(
    border: Border.all(color: Colors.yellow, width: 1),
    borderRadius: BorderRadius.circular(5),
    color: Colors.red);

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  double w = 300;
  double h = 300;
  int gridvalue = 3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
              child: Text(
            '$gridvalue x $gridvalue',
            style: TextStyle(fontSize: 30, color: Colors.blue),
          )),
          SizedBox(
            height: 20,
          ),
          Container(
              color: Colors.blue,
              height: h,
              width: w,
              child: GridView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: gridvalue * gridvalue,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 0,
                    crossAxisSpacing: 0,
                    crossAxisCount: gridvalue,
                  ),
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: kdecoration,
                      child: Center(
                          child: Text(
                        (index   1).toString(),
                        style: TextStyle(fontSize: 20, color: Colors.white),
                      )),
                      //color: Colors.green,
                    );
                  })),
          SizedBox(
            height: 20,
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        gridvalue = 3;
                      });
                    },
                    child: Text('3x3')),
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        gridvalue = 4;
                      });
                    },
                    child: Text('4x4')),
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        gridvalue = 5;
                      });
                    },
                    child: Text('5x5')),
              ],
            ),
          )
        ],
      ),
    );
  }
}

也放置了輸出影像...

uj5u.com熱心網友回復：

您可以在 Flutter 檢查器中看到默認情況下GridView具有填充 (0, 24, 0, 0)。EdgeInsets.zero您可以通過添加“GridView”來洗掉它。

GridView.builder(
  padding: EdgeInsets.zero,
  ...
)

uj5u.com熱心網友回復：

在GridView有一個默認的填充，只是你必須把這樣zero padding的：padding

    GridView.builder(

      padding:EdgeInsets.all(0)

)

標籤：扑镖颤动布局

上一篇：將函式傳遞給小部件并在按鈕按下時呼叫函式

下一篇：如何自定義linter規則？