容器中的空白空间处于 Flutter 状态

41ik7eoe  于 2023-06-24  发布在  Flutter
关注(0)|答案(2)|浏览(173)
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.deepPurple,
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.deepPurple, Colors.purple],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Image.asset(
                  'assets/images/quiz-logo.png',
                  height: 400,
                  fit: BoxFit.fill,
                ),
                const Text(
                  "Learn Flutter the fun way!",
                  style: TextStyle(fontSize: 30, color: Colors.white),
                ),
              ]),
        ),
      ),
    ),
  );
}

我正试着在屏幕上添加一个图像。然而,当我将图像的高度改变到500以下时,我会在右侧得到一个不同颜色的空白空间。

wwodge7n

wwodge7n1#

当您将图像的高度更改为400时,它已调整大小以保持比例,因此其宽度也会减小。
使你的主容器的宽度,它的内容居中。

Container(
    alignment: Alignment.center,
    width: double.infinity,
    child: ...
)

也可能有助于将列的横轴居中。

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: ...
)
axzmvihb

axzmvihb2#

Flutter布局黄金法则
约束下降。尺码变大了。父项设置位置。
有几种方法可以获得全宽,因为Dainel Possamai在容器上包含width: double.infinity将解决这个问题。
你也可以

Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,

或者

body: Container(
  constraints: BoxConstraints.expand(),

了解更多关于layout/constraints的信息。

相关问题