Flutter 当有背景图像时，有没有办法阻止我的圆形化身在x轴上缩放

我在我的页面上添加了一个带有背景图像的圆形头像。但是当我添加背景图像时，我无法阻止它在x轴上缩放。当我没有背景图像，但只有背景颜色时，它是完美的圆形，但当我添加一个时，我得到以下结果

当我把它包在一个大盒子里。如果我不这样做，它就会伸展。但它应该只是一个圆。我能做些什么使它成为一个圆圈

    class _TheProfilePageState extends State<TheProfilePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Theme.of(context).backgroundColor,
          body: Padding(
            padding: EdgeInsets.all(30.0),
            child: Column(
              children: [
                Expanded(
                  flex: 1,
                  child: Stack(
                    children: 
                    [
                      Align(
                        alignment: Alignment.topLeft,
                        child: NavigatePopButton(),
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Text
                        (
                          'Profile',
                          style: Theme.of(context).textTheme.title,
                        ),
                      )
                    ],
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: SizedBox
                  (
                    width: 50.0,
                    height: 50.0,
                    child: CircleAvatar
                    (
                      backgroundImage: AssetImage('assets/pictures/profile_placeholder.png'),
                      radius: 75,
                      foregroundColor: Colors.black,
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: ListView.separated
                  (
                    itemCount: 2,
                    physics: NeverScrollableScrollPhysics(),
                    separatorBuilder: (BuildContext context, int index) => Divider(height: 1.0), 
                    itemBuilder: (BuildContext context, int index)
                    {
                      return 
                      [
                        ListTile
                        (
                          title: Text(
                            'Name',
                            style: Theme.of(context).textTheme.body1,
                          ),
                          trailing: Icon
                          (
                            Icons.edit,
                            color: Theme.of(context).primaryColor,
                          ),
                        ),
                        ListTile
                        (
                          title: Text(
                            'Phone Number',
                            style: Theme.of(context).textTheme.body1,
                          ),
                          trailing: Text(
                            '0612345678',
                            style: Theme.of(context).textTheme.subtitle,
                          ),
                        ),
                      ][index];
                    }
                  )
                ),
              ],
            ),
        )
        );
      }

}

class\u profilePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景色：主题。背景色，
主体：填充物(
填充：所有边缘设置（30.0），
子：列(
儿童：[
扩大(
弹性：1，
子：堆栈(
儿童：
[
对齐(
对齐：alignment.topLeft，
子项：NavigatePopButton（），
),
对齐(
对齐：alignment.topCenter，
子：文本
(
"简介",，
样式：Theme.of（context）.textTheme.title，
),
)
],
),
),
扩大(
弹性：2，
孩子：大小盒子
(
宽度：50.0，
身高：50.0，
孩子：圆环星
(
背景图片：AssetImage（'assets/pictures/profile_placeholder.png'），
半径：75，
前底色：颜色。黑色，
),
),
),
扩大(
弹性：2，
子项：ListView.separated
(
物品计数：2，
物理学：NeverscrollableScroll物理学（），
separatorBuilder：（BuildContext上下文，int索引）=>分隔符（高度：1.0），
itemBuilder:（构建上下文，int索引）
{
返回
[
列表砖
(
标题：正文(
“姓名”，
样式：Theme.of（context）.textTheme.body1，
),
尾随：图标
(
图标。编辑，
颜色：主题。背景。原色，
),
),
列表砖
(
标题：正文(
“电话号码”，
样式：Theme.of（context）.textTheme.body1，
),
尾随：文本(
'0612345678',
风格：Theme.of（context）.textTheme.subtitle，
),
),
][索引]；
}
)
),
],
),
)
);
}
}

要使其成为圆形，您可以将

ClipRRect

小部件用作

CircleAvatar

的子部件。工作示例代码如下：

Expanded(
                flex: 2,
                child: SizedBox
                  (
                  width: 50.0,
                  height: 50.0,
                  child: CircleAvatar
                    (
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(75),
                        child: Image.asset('assets/placeholder.png')
                      ),
                    foregroundColor: Colors.black,
                  ),
                ),
              ),

在UI中如下所示：

---

希望这能有所帮助。

您是否尝试删除

扩展的

小部件，然后删除

大小框

？是的，我确实给出了类似的结果，我现在将重试如果不起作用，请尝试从

大小框

中删除宽度和高度约束。但我认为删除扩展的小部件应该可以。问题是，如果我增加头像的大小，图片不会占据头像的全部空间，这使得它与背景颜色有一个巨大的边界。但它是圆的。