Flutter中Container组件内的CircleAvatar设置radius不生效是什么原因

问题原因 #

你直接将CircleAvatar作为Container的子组件时，Container默认会向子组件传递紧约束，强制子组件填充自身所有可用空间，此时CircleAvatar的radius属性对应的尺寸约束会被父级的紧约束覆盖，因此设置不生效。

解决方案 #

给CircleAvatar外层包裹一个可以提供松约束的布局组件，比如Center、Align等，允许子组件按照自身设定的尺寸渲染，修改后的代码如下：

Container(
  width: 400,
  height: 250,
  decoration: BoxDecoration(
    gradient:LinearGradient(
      colors: <Color>[
        Colors.purpleAccent,
        Colors.pink,
      ]
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Center(
    child: CircleAvatar(
      backgroundImage: AssetImage('images/images.jpg'),
      radius: 1,
    ),
  ),
),

如果需要调整CircleAvatar在Container内的位置，可将Center替换为Align组件，通过alignment参数指定位置即可。

内容的提问来源于stack exchange，提问作者Praveen Kumar