如何在放置图像或视频时自动设置 BoxConstraints 尺寸？答案

【问题标题】：How to automatically set BoxConstraints dimensions while an image or a video is placed on it?如何在放置图像或视频时自动设置 BoxConstraints 尺寸？
【发布时间】：2023-01-09 01:17:13
【问题描述】：

我将创建一个看起来像 Telegram 频道页面的页面。我试着做一张卡片：

ChannelPostCard.dart：

class ChannelPostCard extends StatelessWidget {
  const ChannelPostCard({super.key, required this.channelPostModel});
  final ChannelPostModel channelPostModel;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerRight,
      child: ConstrainedBox(
        constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width - 45, minWidth: 180),
        child: Card(
          elevation: 1,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          color: const Color.fromARGB(255, 204, 255, 230),
          margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.asset(
                'assets/images/${channelPostModel.image}',
                height: 200,
              ),
              Padding(
                padding: const EdgeInsets.only(
                    left: 25, right: 10, top: 5, bottom: 25),
                child: Text(
                  channelPostModel.text,
                  style: const TextStyle(
                    fontSize: 18,
                  ),
                ),
              ),
              Row(
                children: [
                  const SizedBox(
                    width: 5,
                  ),
                  Text(
                    channelPostModel.uploadDate,
                    style: const TextStyle(fontSize: 12, color: Colors.grey),
                  ),
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5),
                    child: Icon(
                      Icons.remove_red_eye,
                      size: 20,
                      color: Colors.grey,
                    ),
                  ),
                  Text(
                    channelPostModel.seenCount.toString(),
                    style: const TextStyle(fontSize: 12, color: Colors.grey),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我想将卡片的宽度设置为等于图像的宽度（如果宽度大于卡片的“最大宽度”，将应用最大宽度。）和要安装在卡片中的图像。右上角也失去了圆度。我该如何修复我的用户界面？

【问题讨论】：

标签： flutter

【解决方案1】：

对于您的第一期，您需要将 Row 的 mainAxisSize 设置为 min：

Row(
  mainAxisSize: MainAxisSize.min, // add this
  children: [
  const SizedBox(
    width: 5,
  ),
  ...
)

对于第二期，您需要将卡片的clipBehavior 设置为antiAlias：

child: Card(
  clipBehavior: Clip.antiAlias, // add this
  elevation: 1,
  ...
)

【讨论】：