如何在 Flutter 中构建合适的卡片？答案

【问题标题】：How to build a proper card in flutter?如何在 Flutter 中构建合适的卡片？
【发布时间】：2021-03-03 07:05:33
【问题描述】：

我正在开发一个颤振应用程序，我想在其中使用卡片，但没有得到想要的结果。

我也想要这个带有图像的左侧：

但我得到的是：

以下是我的代码：

class CommunityCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Card(
      child: Container(
        decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black,
            ),
            borderRadius: BorderRadius.all(Radius.circular(20))),
        child: Wrap(
          direction: Axis.horizontal,
          children: [
            SizedBox(
              width: 5,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.black,
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Icon(
                Icons.sports_cricket,
                size: 15,
                color: Colors.blue,
              ),
            ),
            Text(
              'Sports',
              style: TextStyle(fontSize: 15),
            ),
            Icon(
              Icons.cancel_outlined,
              size: 15,
            )
          ],
        ),
      ),
    );
  }
}

有人可以帮我怎么做吗？

【问题讨论】：

标签： flutter dart

【解决方案1】：


    class CommunityCard extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Card(
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                ),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Padding(
              EdgeInsets.symmetric(horizontal:10.0,vertical:8.0), //Keep experimenting with values till you get the correct one 
             child: Wrap(
              direction: Axis.horizontal,
              crossAxisAlignment: WrapCrossAlignment.center,//The change
              children: [
                SizedBox(
                  width: 5,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                  child: Icon(
                    Icons.sports_cricket,
                    size: 12,
                    color: Colors.blue,
                  ),
                ),
                Text(
                  'Sports',
                  style: TextStyle(fontSize: 15),
                ),
                Icon(
                  Icons.cancel_outlined,
                  size: 15,
                )
              ],
            ),
           ),
          ),
        );
      }
    }

我添加了 crossAxisAlignment: WrapCrossAlignment.center，使其与另一个轴的中心对齐
我还添加了一些美学填充

【讨论】：

谢谢。卡片对齐良好，但发生的情况是图像的边界与容器的边界接触。有没有办法在两者之间提供填充，这样两个边界都不会被触及
能否在您的答案中附上图片。我想我知道你的问题，但如果你附上图片会更清楚
我解决了这个问题..谢谢你的代码帮助。
好的，我们可以简单地在所有边添加填充而不是水平。我正在更改代码，但您可以简单地执行 EdgeInsets.symmetric(horizontal:10.0,vertical:8.0), //继续尝试值直到获得正确的值

【解决方案2】：

在包装小部件属性中写入 crossAxisAlignment: WrapCrossAlignment.center,

【讨论】：

【解决方案3】：

在 ClipRRect 中使用 ListTile 进行曲线和正确对齐。

ClipRRect(
          borderRadius: BorderRadius.circular(25.0),
          child:Container(
            color:Colors.green,
            child:ListTile(
          leading:Icon(Icons.sports_cricket,),
          title:Text('Sports'),
          trailing:Icon(Icons.close)
        ),
            )
        ),

【讨论】：

【解决方案4】：

你只需要一个芯片下面是一个例子：-


Chip(
    onDeleted: () => (redirection call here),
        deleteIcon: Icon(
             Icons.sports_cricket,
          size: rowIconSize,
          color: companyThemeData.primaryColor,
        ),
        labelStyle:
            normal12blackish.copyWith(color: companyThemeData.primaryColor),
        backgroundColor: companyThemeData.primaryColorLight,
        label: Text('Sports'),
      );

【讨论】：