Question

我有一个ListView构建器，该容器将容器作为子容器，我希望每个容器都具有圆角，因此我将其包装在ClipRRect中并赋予了borderRadius，但唯一受影响的是阴影。

结果如下：

ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: items.length,
      itemBuilder: (BuildContext ctx, int index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: Container(
            height: 20,
            padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            margin: EdgeInsets.symmetric(horizontal: 12),
            decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                boxShadow: [
                  BoxShadow(
                      color: Theme.of(context).primaryColor,
                      offset: Offset(0, -5),
                      blurRadius: 10.0)
                ]),
            child: Text(
              items[index],
              style: TextStyle(fontSize: 12.0, color: Colors.white),
            ),
          ),
        );
      }),

我想念什么？（我知道我可以在BoxDecoration上使用borderRadius，但是我想知道为什么这不能正常工作）

Answer 1

删除ClipRRect并将半径直接赋予容器。

如果要保留阴影，请不要删除ClipRRect，而要将radius属性添加到内部容器中。

Container(
  height: 20,
  padding:
      EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  margin: EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)), //here
      color: Theme.of(context).primaryColor,
      boxShadow: [
        BoxShadow(
            color: Theme.of(context).primaryColor,
            offset: Offset(0, -5),
            blurRadius: 10.0)
      ]),
  child: Text(
    items[index],
    style: TextStyle(fontSize: 12.0, color: Colors.white),
  ),
),

编辑：得到的圆角阴影是由于用于内部容器的偏移量引起的。

编辑：这可能会有所帮助：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: 50,
      padding: const EdgeInsets.all(10),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        child: Container(
          height: 10,
          color: Colors.red,
        ),
      ),
    );
  },
),

颤振：为容器提供边界半径

1 个答案: