Flutter 在背景图像上排列定位徽标

发布于12月01日

我想在背景图像上定位三个标志，如图所示.

不幸的是，它变成了这样的图像

我应该怎么做才能让它工作呢？

代码

 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.spaceAround, children: [
          Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              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,
                      ),
                ),
              ]),
          Container(
            child: Image.asset("assets/images/logo_splash.jpg",
                height: 100, width: 100, scale: 3.5
                // fit: BoxFit.fitWidth,
                ),
          ),
        ]),
      ),
    );
  }

列允许您将它们排列在上方和下方，然后使用

          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,

以获得所需的间距.

Flutter相关问答推荐

Flutter bloc -如何使用BlocBuilder？

在Flutter中，CachedNetworks Image不工作(不从CachedData加载)

如何将图像从顶部和底部半向外设置为飘动

从Flutter应用程序解释蓝牙BLE数据：了解Sylvania压力值

如何在不使用NULL-check(！)的情况下缩小`FutureBuilder.Builder()`内部的`Snaphot`范围

从底部开始固定，然后使其可拖曳Flutter

在框中保存对象列表时，类型推断无法正常工作

如何管理枚举类型的阻塞事件？

Firebase WHERE过滤器在日期字段中不起作用

为什么我的Flutter 动画过渡没有发生？

如何在 Flutter 中设计像 zomato 应用程序一样的搜索字段？

如何在flutter中更改showModalBottomSheet小部件中CheckboxListTile小部件的值？

Flutter：在 pubspec.yaml 中找不到assets资源

如何在Flutter中的textField中在可编辑文本和前缀图标之间添加空格？

Flutter url_launcher 插件抛出java.lang.IllegalArgumentException：接收器未注册：io.flutter.plugins.urllauncher.WebViewActivity

Flutter snapShot.hasData 为假但响应有数据

扩展磁贴尾随图标在与一个磁贴交互时更新列表中的所有内容.如何只更改展开图块的图标？

如何在 flutter 中制作这种类型的扩展瓦片

如何在 ListView.builder 中扩展文本？

在Flutter 中将数字转换为印度文字样式

实用课程推荐