android - Flutter:图像溢出容器

标签 android mobile dart widget flutter

我在 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/

相关文章:

android - ExpandableListView - 检测所有组何时折叠

android - 移动设备上的多选 <select> 框

html - 难以使 Strava Iframe 响应式 (CSS/HTML)

dart - 如何删除 RadioListTile 上的内部填充,以便可以连续使用 3 个 RadioListTiles?

Dart 最终函数

android - 如何访问Android库Kotlin函数

android - 从相机捕获图像并上传到 Firebase

android - 像 Google Agenda App 这样的新 TimePicker 对话框

html - 移动响应列

list - 将 List 传递给 Flutter 中的另一个类