Flutter：图片溢出容器

Question

我正在使用Flutter为每个事件使用Card制作事件信息列表。每个卡片的前导是与事件相关的。

我想将我的Card制作成圆角矩形，但是当我将图片放置在Card的child中的Row的children中时，图片的角不是圆角。

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

- Hung Nguyen

---

好问题。我为此苦苦挣扎了数小时。我的图像高度超出了卡片高度。 - Edijae Crusar

Answer 1

Card小部件具有其自己的剪切行为，因此您只需将clipBehavior属性设置为Clip.antiAlias即可剪切卡片外的内容。

- Raouf Rahiche