英文:
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),
)
],
),
],
),
),
),
);
}
}
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
对于第一个问题,您需要将Row
的mainAxisSize
设置为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,
...
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论