在Flutter中的每個網格視圖項的底部添加一個文本小部件

我是 Flutter 的新手，我正在制作一個商店應用程式。

在主螢屏中，我使用了網格視圖構建器來顯示專案的影像。現在我想在每個網格視圖專案的底部添加兩個文本小部件，顯示專案的名稱和價格。

此 gridview 構建器是列小部件的子級。列小部件有兩個文本小部件和 gridview builder 作為其子級。

GridView.builder(
                padding: const EdgeInsets.all(10.0),
                itemCount: loadedProducts.length,
                itemBuilder: (ctx, i) => Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: secondaryColorlight,
                      borderRadius: BorderRadius.circular(defaultBorderRadius)),
                  child: 
                    Image.asset(
                      loadedProducts[i].imageUrl,
                      height: 132,
                    ),
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 3 / 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                ),
              )

這就是我的主頁現在的樣子

這就是我想要的樣子

uj5u.com熱心網友回復：

您可以Column從itemBuilder. 您可能還需要從childAspectRatio

itemBuilder: (ctx, i) => Column(
  children: [
    Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: secondaryColorlight,
          borderRadius: BorderRadius.circular(defaultBorderRadius)),
      child: Image.asset(
        loadedProducts[i].imageUrl,
        height: 132,
      ),
    ),
      // padding if needed
    Text("your text"),
  ],
),

您也可以檢查GridTile小部件。

更多關于Flutter 中的布局

uj5u.com熱心網友回復：

GridView.builder(
            padding: const EdgeInsets.all(10.0),
            itemCount: loadedProducts.length,
            itemBuilder: (ctx, i) => Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: secondaryColorlight,
                  borderRadius: BorderRadius.circular(defaultBorderRadius)),
              child: 
                Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Container(
                    height: 190.0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child:Image.asset('images/image.png'),    
                    ),
                  ),
                ),
                SizedBox(height: 5.0),
                Padding(
                  padding: const EdgeInsets.only(left: 10.0, bottom: 5.0, right: 10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Flexible(
                            child: Text('Price'),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Text('Sometext'
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,                                                             ),
                        ],
                      ),
                      Text('title',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                     ),
                    ],
                  ),
                ),
              ],
            ),
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 3 / 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
          )

標籤：扑镖网格视图颤振布局

上一篇：Flutter：如何修復setState()回呼引數回傳Future錯誤？

下一篇：Flutter/Dart/firebase::嘗試退出時出錯