Flutter中如何在背景图上正确排列定位三个Logo？

我希望在背景图上按照预期样式排列三个Logo，但当前代码运行后呈现的效果不符合要求。以下是我正在使用的Flutter代码，请问该如何修改以实现预期布局？

原代码 #

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("assets/images/bg_splash.jpg"),
                    fit: BoxFit.cover,
                ),
            ),
            child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: < Widget > [
                    Container(
                        child: Image.asset("assets/images/logo_splash.jpg",
                            height: 100, width: 100, scale: 3.5
                            // fit: BoxFit.fitWidth,
                        ),
                    ),
                    Container(
                        child: Image.asset("assets/images/logo_splash.jpg",
                            height: 100, width: 100, scale: 3.5
                            // fit: BoxFit.fitWidth,
                        ),
                    ),
                ]),
        ),
    );
}

修改后的代码 #

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("assets/images/bg_splash.jpg"),
                    fit: BoxFit.cover,
                ),
            ),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const <Widget>[
                    Image.asset(
                        "assets/images/logo_splash.jpg",
                        height: 100,
                        width: 100,
                        fit: BoxFit.contain,
                    ),
                    SizedBox(height: 20),
                    Image.asset(
                        "assets/images/logo_splash.jpg",
                        height: 100,
                        width: 100,
                        fit: BoxFit.contain,
                    ),
                    SizedBox(height: 20),
                    Image.asset(
                        "assets/images/logo_splash.jpg",
                        height: 100,
                        width: 100,
                        fit: BoxFit.contain,
                    ),
                ],
            ),
        ),
    );
}

关键调整说明 #

• 替换布局组件：把横向排列的Row换成垂直排列的Column，实现Logo上下分布
• 补充第三个Logo：添加第三个Image.asset组件，满足三个Logo的需求
• 调整对齐规则：用mainAxisAlignment: MainAxisAlignment.center让Logo垂直居中，crossAxisAlignment: CrossAxisAlignment.center保证水平居中，移除原Row的crossAxisAlignment: CrossAxisAlignment.stretch避免不必要的拉伸
• 添加间距：通过SizedBox设置Logo之间的垂直间距，让布局更协调
• 优化组件结构：去掉冗余的Container嵌套，直接使用Image组件；添加const关键字优化性能；用fit属性替代scale，更直观控制图片显示效果

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