Question

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

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

但我得到的是：

以下是我的代码：

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

有人可以帮我怎么做吗？

Answer 1

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

Answer 2


    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，使其与另一轴的中心对齐
为了美观，我还添加了一些填充

Answer 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)
        ),
            )
        ),

Answer 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'),
      );

如何在颤振中构建合适的卡片？

4 个答案: