Flutter BorderRadius option 不生效？

[yuerengui]

import 'package:flutter/material.dart';
import '../model/post.dart';

class SliverComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.only(left: 8.0, right: 8.0),
              sliver: SliverListComponent(),
            ),
          )
        ],
      ),
    );
  }
}

class SliverListComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
        return Padding(
          padding: EdgeInsets.only(bottom: 32.0),
          child: Material(
            elevation: 14.0,
            shadowColor: Colors.grey.withOpacity(1),
            borderRadius: BorderRadius.circular(30.0),
            child: Container(
              child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
            ),
          ),
        );
      }, childCount: posts.length),
    );
  }
}

class SliverGridComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8.0,
          mainAxisSpacing: 8.0,
          childAspectRatio: 1.0),
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
        );
      }, childCount: posts.length),
    );
  }
}

按照皓哥的视频里面一行一行跟着打的，不知为何 borderRadius 就是不生效？
求解答一下，谢谢。

[wanghao]

他叫一拳倒是吧。

[wanghao]

参考视频：ClipRRect

https://ninghao.net/video/6626

你可以使用 ClipRRect 给图像裁出一个圆角效果。

[yuerengui]

OK，我就是比较疑惑，同样的代码为何我的出不了这个效果...
是我的 flutter 更新到1.0导致代码不生效的缘故么？

[wanghao]

我觉得应该不是。您可以直接运行一下我写好的那个应用，然后看看效果。

[yuerengui]

我试了下你的也没有圆角了

查了下文档上面的，我这边加了个option 就好了

type: MaterialType.card

[yuerengui]

好像是我网络问题，当我下面的话没说..

---

最诡异的问题不是这个，是我运行你的项目之后 hot reload 没了，vs code 的 F5 运行项目一直白屏，我自己的可以，不知道是什么问题..

[CatEatFish]

我加了 type: MaterialType.card 这句话也不显示圆角，请问还有别的解决办法吗？

[CatEatFish]

你好，你的项目也不显示圆角，我现在不知道如何曲解决？求帮忙

[wanghao]

我再试一下哈。刚刚试了一下，用之前的 flutter 版本，是可以有圆角效果的，一会儿我再升级一下 flutter 框架试试。

[wanghao]

升级 Flutter 之后，也是有圆角效果的。

[wanghao]

import 'package:flutter/material.dart';
import '../model/post.dart';

class CardDemo extends StatefulWidget {
  @override
  _CardDemoState createState() => _CardDemoState();
}

class _CardDemoState extends State<CardDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CardDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: posts.map((post) {
            return Card(
              child: Column(
                children: <Widget>[
                  AspectRatio(
                    aspectRatio: 16/9,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.0),
                        topRight: Radius.circular(4.0),
                      ),
                      child: Image.network(
                        post.imageUrl,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(post.imageUrl),
                    ),
                    title: Text(post.title),
                    subtitle: Text(post.author),
                  ),
                  Container(
                    padding: EdgeInsets.all(16.0),
                    child: Text(post.description, maxLines: 2, overflow: TextOverflow.ellipsis,),
                  ),
                  ButtonTheme.bar(
                    child: ButtonBar(
                      children: <Widget>[
                        FlatButton(
                          child: Text('Like'.toUpperCase()),
                          onPressed: () {},
                        ),
                        FlatButton(
                          child: Text('Read'.toUpperCase()),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  )
                  // Text(post.title)
                  // AspectRatio(
                  //   aspectRatio: 16/9,
                  //   child: Image.network(post.imageUrl, fit: BoxFit.cover,),
                  // ),
                ],
              ),
            );
          }).toList(),
        ),
      )
    );
  }
}

[CatEatFish]

lutter 框架试

不加载图片，用文字就有效果了，
你看看sliver_Demo.dart

[wanghao]

                  AspectRatio(
                    aspectRatio: 16/9,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Image.network(
                        posts[index].imageUrl,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),

[857329255]

加了.card 也是一样的 没有圆角 如果用ClipRRect()的话 底部的阴影没了? 不晓得妹子解决呀

[ychow]

有的。就用ClipRRect.

[qiangzai]

图片不显示圆角的原因是因为Material没有对子部件进行裁剪，多出来的部分依然会显示。直接给Material添加一个裁剪属性就OK了，clipBehavior: Clip.hardEdge,