如何在颤动中更改卡片的宽度？答案

【问题标题】：How to change width of card in flutter?如何在颤动中更改卡片的宽度？
【发布时间】：2021-02-15 10:02:15
【问题描述】：

请问你有什么技巧可以改变卡片的宽度吗？

我尝试了 SizedBox Card，但效果不佳。它只是改变了高度。

下面是我的代码

body: ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            elevation: 3.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0)
            ),
            child: ListTile(
              contentPadding: EdgeInsets.fromLTRB(50, 50, 50, 50),
              leading: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: 150,
                  minHeight: 150,
                  maxWidth: 150,
                  maxHeight: 150,
                ),
                child: Image.asset('assets/yeme_logo.png', fit: BoxFit.contain),
              ),
              trailing: Icon(
                Icons.arrow_forward_ios,
                size: 27.0,
              ),
              onTap: () {
                
              },
            ),
          ),
        ),
      ],
    ),

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以管理您的“卡片”的宽度和高度，例如：

/// Change your [Padding] widget with container.
Container(
  height: 50, 
  width: MediaQuery.of(context).size.width - 100,

  padding: const EdgeInsets.all(8.0),
  child: (...) // Here your child

完整代码：

Container(
  height: 50, //
  width: MediaQuery.of(context).size.width - 100,
  padding: const EdgeInsets.all(8.0),
  child: Card(
    elevation: 3.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0)),
    child: ListTile(
      contentPadding: EdgeInsets.fromLTRB(50, 50, 50, 50),
      leading: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: 150,
          minHeight: 150,
          maxWidth: 150,
          maxHeight: 150,
        ),
        child: Image.asset('assets/yeme_logo.png', fit: BoxFit.contain),
      ),
      trailing: Icon(
        Icons.arrow_forward_ios,
        size: 27.0,
      ),
      onTap: () {},
    ),
  ),
),

【讨论】：

我试过了，只是高度变了。是因为我在 ListView 中有它吗？
这张卡在ListView？如果您可以更新您的问题并添加 ListView 代码
更新了。但我只想更改列表视图中的那张卡片。
你可以用包装容器来做到这一点，用 Container 包装你的 Card 小部件并给出一些高度和宽度值

【解决方案2】：

可以使用以下代码设置卡片的高度和宽度：

Container(
  width: 100,
  child: Card()
)

您也可以根据设备的屏幕尺寸设置尺寸尺寸：

Container(
width: MediaQuery.of(context). size. width,
child: Card()
)

如果您遇到任何其他问题，请告诉我。

【讨论】：