gridview的所有按鈕都應該在顫振中適合其父容器-有解無憂

我正在嘗試根據我的繪圖制作計算器的 UI，

在這里，我將螢屏分為兩個擴展容器，頂部用于輸出，底部用于按鈕...

在底部容器中，我采用網格視圖來顯示所有按鈕，

我想在沒有網格視圖滾動效果的情況下將所有按鈕都放在底部區域。

在我的代碼中...網格視圖未顯示最后一行...我必須向下滾動才能查看它...

gridview 的所有按鈕都應該在顫振中適合其父容器這是我的代碼

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: Container(color: Colors.orange,)),
            Expanded(
                child: GridView.builder(
                  itemCount: buttons.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4),
                    itemBuilder: (context, index) {
                      return ButtonWidget(color: Colors.grey,
                          ontap: () {},
                          caption: buttons[index].toString(),
                          textcolor: Colors.black);
                    })),
          ],
        ),
      ),
    );
  }

這是按鈕的類


class ButtonWidget extends StatelessWidget {
  final color;
  final textcolor;
  final String caption;
  final VoidCallback ontap;

  const ButtonWidget(
      {Key? key,
      required this.color,
      required this.ontap,
      required this.caption,
      required this.textcolor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey[400],
          borderRadius: BorderRadius.circular(100),
        ),
        child: Center(
            child: Text(
          caption.toString(),
          style: GoogleFonts.actor(fontSize: 30,fontWeight: FontWeight.bold),
        )),
      ),
    );
  }
}

uj5u.com熱心網友回復：

1.刪??除你的Expandedfor GridView。

禁用 GridView 的滾動。像這樣。

   GridView.builder(
    /// Add these two lines
     shrinkWrap: true,
     physics: const NeverScrollableScrollPhysics(),
     /// Your code,
    ),

提示： 如果您不想在頂部放置小容器，您可以像這樣調整按鈕的縱橫比。但這會使按鈕看起來有點難看。

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
///Add this, tweak the value as you wish
childAspectRatio: 1.3,
),

玩得開心！

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/529216.html

標籤：扑用户界面

上一篇：將垂直行字母添加到游戲板GUI的更有效方法

下一篇：如何從QWidget類中的QMainWindow類訪問變數和方法-PythonPyQt5