Flutter新手求助：Material Widget无法设置圆角边框

嗨，我一眼就发现问题所在啦！你给Material组件设置了borderRadius，但内层的Container自己加了color属性——这个背景色会直接铺满整个容器，把Material的圆角完全盖住，所以看起来还是方形的。

最简洁的修复方案：把背景色移到Material组件上 #

直接把颜色属性从内层Container挪到Material的color字段里，这样Material的圆角会自动作用于背景色，同时还能保留阴影（elevation）效果。修改后的代码如下：

Widget _buildCategoryItem(index) { 
 return GestureDetector( 
 onTap: () { 
 onTabCategory(index); 
 }, 
 child: Center( 
 child: Container( 
 margin: EdgeInsets.only(left: 10.0), 
 child: Material( 
 elevation: 2.0, 
 borderRadius: BorderRadius.circular(6.0),
 // 把背景色移到Material组件上
 color: _category_selected == index ? Colors.orange[800] : Colors.orange[500], 
 child: Container( 
 padding: EdgeInsets.only( 
 left: 12.0, 
 top: 7.0, 
 bottom: 7.0, 
 right: 12.0), 
 // 移除内层Container的color属性
 child: Text( 
 _categorys[index], 
 style: TextStyle(color: Colors.white), 
 ), 
 ), 
 ), 
 ), 
 ), 
 ); 
}

为什么原来的代码不生效？ #

Material的borderRadius本质是用来裁剪子组件的，但当子组件（你的内层Container）有独立的背景色时，它会忽略父组件的圆角设置，直接绘制到容器边界外。只有当子组件没有独立背景、或者也设置了相同的borderRadius、或者被ClipRRect包裹时，才能显示出圆角效果。

如果一定要保留内层Container的color，也可以给它添加同样的borderRadius: BorderRadius.circular(6.0)，但第一种方法更符合Material组件的设计逻辑，代码也更简洁。

内容的提问来源于stack exchange，提问作者Tarsis Cruz