gpt4 book ai didi

android - Flutter:图像溢出容器

转载 作者:IT老高 更新时间:2023-10-28 12:39:33 28 4
gpt4 key购买 nike

我在 Flutter 中为每个事件使用 Card 来制作事件信息列表。每张牌的领先与事件有关。

我想让我的卡片成为圆角矩形,但是当我将图像放在卡片的子项内的行的子项中时,图像的角不是圆角的。

我的卡片类:

import 'package:flutter/material.dart';

class SmallEventCard extends StatefulWidget {
final imageURL;
final title;
final time;
final place;

SmallEventCard({this.imageURL, this.title, this.time, this.place});

@override
_SmallEventCardState createState() => _SmallEventCardState();

}

class _SmallEventCardState extends State<SmallEventCard> {
bool isFavorite;

@override
void initState() {
// TODO: implement initState
super.initState();
isFavorite = false;
}

@override
Widget build(BuildContext context) {
final screen = MediaQuery.of(context).size;


return Material(
child: SizedBox(
height: screen.height / 7,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: Row(
children: <Widget>[
AspectRatio(
aspectRatio: 4 / 3,
child: Image.network(widget.imageURL,
fit: BoxFit.fitHeight,
),
),
SizedBox(
width: 10.0,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.title,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),maxLines: 2, overflow: TextOverflow.clip,
),
SizedBox(height: 5.0,),
Text(widget.time.toString(),
overflow: TextOverflow.clip,
),
SizedBox(height: 5.0,),
Text(widget.place,
overflow: TextOverflow.clip,
),
],
),
),
SizedBox(
width: 50.0,
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.favorite_border)),
)),
),
],
),
),
),
);
}
}

Preview

最佳答案

Card 小部件有自己的剪辑行为,因此您只需将 clipBehavior 属性设置为 Clip.antiAlias卡片会被剪掉

关于android - Flutter:图像溢出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52796767/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com