如何在 Flutter 中固定卡片宽度？答案

【问题标题】：How to make card width fixed in Flutter?如何在 Flutter 中固定卡片宽度？
【发布时间】：2020-01-22 04:27:10
【问题描述】：

在我的 Flutter 项目中，我想在卡片中显示数据列表中的每一项。为此，我在 Card 中设置了所有组件（例如图像、文本）。

如下图-

现在，问题是-----

我想将卡片宽度固定为固定大小或换行内容。由于 Card 小部件没有 height 和 width 属性，那么我应该如何修复这张卡片的宽度。

这是我的代码-

  Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
    return new Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }

这个 showCard 函数在 Container 中调用。所以，我需要一个解决方案来固定这张卡片的宽度。

【问题讨论】：

可能是 Wrap card with sizedBox 是解决方案。

标签： flutter dart

【解决方案1】：

解决方案是将卡片包装在一个大小合适的盒子中。例如，

Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }
)

【讨论】：

为什么大小的盒子在容器宽度上起作用？