Question

我有一个类似Container的背景（带有圆角的容器）。如果小时候是文本，那么一切都很好。但是，如果孩子是图片，它覆盖了整个容器（甚至是角落）。

我的构建方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: buildAppBar("", context),
        body: new Container(
            color: Colors.brown,
            child: Material(
              borderRadius: const BorderRadius.only(
                  topLeft: const Radius.circular(16.0),
                  topRight: const Radius.circular(16.0)),
              elevation: 12.0,
              child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Image(image: NetworkImage('url')),
                  ]),
            )));
  }

该图像如何在半径角内？

Answer 1

使用ClipRRect

ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
        child: Image(image: NetworkImage('url'))),

UPD 找到了另一个解决方案-Clip.antiAlias中的Card：

Material(
      child:  Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0))),
        child: Image(image: NetworkImage('url')),
        elevation: 12.0,
        clipBehavior: Clip.antiAlias,
      ),
    ),

像Flutter中的容器一样

1 个答案: