Flutter：放置徽标图像后背景变为一半

Posted 2023-02-23

【中文标题】Flutter：放置徽标图像后背景变为一半

【英文标题】：Flutter: Background becomes half after putting logo image

【发布时间】：2020-03-12 06:41:44

【问题描述】：

所以我试图将我的图像标志放在背景上，但我的背景突然被裁剪，出现了一半的黑屏。如图：

我的 main.dart 代码：

import 'package:flutter/material.dart';
import 'login_page.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      home: new LoginPage(),
      theme: new ThemeData(
        primarySwatch: Colors.green
      )
    );
  

我的 login_page.dart 代码：

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget
  @override  
  State createState() => new LoginPageState();


class LoginPageState extends State<LoginPage>
  @override 
  Widget build(BuildContext context)
    return new Scaffold(
      backgroundColor: Colors.transparent,
      body: new Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/arrowPNG.png'),
          ]
        ),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/background.png"),
            fit: BoxFit.cover,
          )
        )
      )
    );
  

它是在放置图像标志“Image.asset('assets/arrowPNG.png'),”后发生的。我该如何解决这个问题？

【问题讨论】：

尝试添加到容器对齐：Alignment.center

【参考方案1】：

试试下面的代码

class LoginPageState extends State<LoginPage>
    @override
      Widget build(BuildContext context)
        return new Scaffold(
            backgroundColor: Colors.transparent,
            body: new Container(
              width: MediaQuery.of(context).size.width,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset('images/a_dot_ham.png'),
                    ]
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("images/background.jpg"),
                      fit: BoxFit.cover,
                    )
                )
            )
        );
    

当您将以下行添加到您的容器时，问题将得到解决

width: MediaQuery.of(context).size.width

这是我的结果

【讨论】：

谢谢！您是否碰巧知道如何将图标定位在中心（在您的情况下为箭头），以便 y 轴向上移动一点？

我没有清楚地理解你的问题。如果你能分享一个你想要的例子，我可以帮你。将您的新问题添加为编辑或创建一个新问题。

【参考方案2】：

尝试添加，width: MediaQuery.of(context).size.width height: MediaQuery.of(context).size.height 到 Container 这样，

Container(
          width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset('assets/images/logo.png'),
                ]
            ),
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/splash_bg.png"),
                  fit: BoxFit.cover,
                )
            )
        )

输出

【讨论】：

谢谢！如何调整中心徽标的图像大小？

@NadiaM 这样做Image.asset('assets/images/appicon.png',width: 100,height: 100,)