如何在放置图像或视频时自动设置BoxConstraints的尺寸?

huangapple go评论57阅读模式
英文:

How to automatically set BoxConstraints dimensions while an image or a video is placed on it?

问题

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,
                width: double.infinity, // Set image width to match card width
                fit: BoxFit.cover, // Make the image fit within the card
              ),
              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),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

希望这个修改可以帮助您解决UI的问题。

英文:

I'm going to create a page that looks like Telegram's channel page. I tried to make a card:

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

如何在放置图像或视频时自动设置BoxConstraints的尺寸?

I want to set the card's width equal to the width of the image (if the width is bigger than the "Max width" of the card, the max width will be applied.) and the image to be fitted in the card. The top right corner has also missed its roundness.
How can I fix my UI?

答案1

得分: 1

对于第一个问题,您需要将RowmainAxisSize设置为min

Row(
  mainAxisSize: MainAxisSize.min, // 添加这一行
  children: [
    const SizedBox(
      width: 5,
    ),
    // 其他子元素
  ]
)

对于第二个问题,您需要将卡片(Card)的clipBehavior设置为antiAlias

child: Card(
  clipBehavior: Clip.antiAlias, // 添加这一行
  elevation: 1,
  // 其他卡片属性
)
英文:

For your first issue you need to set Row's mainAxisSize to min:

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

for your second issue you need set card's clipBehavior to antiAlias:

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

huangapple
  • 本文由 发表于 2023年1月9日 00:23:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049423.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定