在 Flutter 中对齐 GridView 内的项目

Question

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

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

我现在的代码（obs：我对 flutter 的经验不多）：

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),
                        ),
                      ],
                    )));
})

Answer 1

在列中更改此项....

crossAxisAlignment: CrossAxisAlignment.start,

如果这改变了您的图像和其他对齐方式而不是您想要的或不希望图像居中，

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

在 Flutter 中对齐 GridView 内的项目

Align items inside GridView in Flutter

gridview

flutter