Flutter：图像溢出容器

Question

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

Answer 1

Card 小部件有它自己的剪切行为，因此您只需将 clipBehavior 属性设置为 Clip.antiAlias，这样卡片外的内容就会被剪切