我怎样才能使一个图像旋转到它的容器之外时不会显示在容器之外呢?我也希望如果图像在正常位置并且比容器大,它会显示为被截断。顺便问一下,我可以对图标做同样的处理吗?
下面是我的代码
class CardList extends StatelessWidget {
const CardList({
Key? key,
required this.text,
required this.subText,
required this.trailing,
}) : super(key: key);
final String text;
final String subText;
final Widget trailing;
@override
Widget build(BuildContext context) {
GlobalKey _container = GlobalKey();
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
margin: EdgeInsets.symmetric(horizontal: 0.5.w, vertical: 0.5.h),
child: Row(
children: [
Container(
padding: EdgeInsets.only(left: 10.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(text,
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subText.isNotEmpty
? AutoSizeText(
subText,
maxLines: 1,
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
fontWeight: FontWeight.w500),
)
: const SizedBox(
height: 0,
),
],
),
),
Container(
color: Colors.blue,
height: 100,
child: Transform.translate(
offset: Offset(0.0, 15.0),
child: Transform.rotate(
angle: -3.14 / 12.0,
child: Image.asset(
'assets/images/map.png',
height: 300,
))),
),
],
));
}
}
4条答案
按热度按时间nvbavucw1#
通过使用Container的
clipBehavior
并将其设置为antiAlias
,您可以确保child
小部件永远不会出现在其父小部件之外,如下所示:2nc8po8w2#
尝试将图像小部件 Package 在ClipRRect小部件ClipRRect中。
zvms9eto3#
尝试下面的代码希望它对你有帮助,参考ClipRRect,只是改变我的形象与你的形象
结果-〉
gev0vcfq4#
使用ClipRRect小工具可以解决这个问题。
如果你在一个ClipRectWidget内的旋转位置包裹你的图像,它会自动剪切向外的边缘。
第一个月
此外,在容器内的正常图像位置中,如果角是圆的而图像不是,则需要将图像放在ClipRect小部件内,borderRadius选项允许您圆化图像以匹配容器半径。