在 Flutter 中对齐 GridView 内的项目答案

【问题标题】：Align items inside GridView in Flutter在 Flutter 中对齐 GridView 内的项目
【发布时间】：2020-11-17 03:57:56
【问题描述】：

我正在尝试在 Flutter 中做这样的事情：

但我需要使产品名称、价格和最后的信息相互对齐。

图像将始终具有相同的高度和宽度，但名称可以具有任意长度。

我现在的代码（obs：我对颤振没有太多经验）：

final columnCount = 2;
final width = MediaQuery.of(context).size.width / columnCount;
const height = 400;

GridView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            padding: EdgeInsets.all(10.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: width / height,
              crossAxisCount: columnCount,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
            ),
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              if (index < snapshot.data.length) {
                return InkWell(
                    onTap: null,
                    child: Container(
                        child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Container(
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Image.network(snapshot.data[index].image,fit: BoxFit.cover,),
                          ),
                          // height: 250,
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Text(snapshot.data[index].title,
                            textAlign: TextAlign.center),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Text(
                            '${helpers.formatMoney(snapshot.data[index].lowPrice)}' +
                                '-' +
                                '${helpers.formatMoney(snapshot.data[index].highPrice)}',
                            textAlign: TextAlign.center),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        RaisedButton(
                          onPressed: () async {
                            cart = await addCart(widget.segment.slug,
                                snapshot.data[index].token, 1);
                            setState(() {});
                          },
                          child: Icon(Icons.add_shopping_cart),
                        ),
                      ],
                    )));
})

【问题讨论】：

标签： flutter gridview

【解决方案1】：

在 Column 中更改它....

crossAxisAlignment: CrossAxisAlignment.start,

如果这将您的图像和其他对齐方式更改为您不想要或想要的图像居中，

为products name, prices and the last information 创建一个单独的列并给出separated column's crossAxisAlignment: CrossAxisAlignment.start,

【讨论】：

谢谢。为我工作。