在我的堆叠图像文件 (Flutter) 之后我有多余的空间

Posted 2023-02-23

【中文标题】在我的堆叠图像文件 (Flutter) 之后我有多余的空间

【英文标题】：I am having unwanted space after my stacked image file (Flutter)

【发布时间】：2021-12-26 03:10:59

【问题描述】：

这是我遇到问题的 dart 文件：据我所知，白色的额外空间是因为这个。看看最后一段文字。

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:lint/lint.dart';
import 'package:simple_shadow/simple_shadow.dart';

class WelcomeLettersDart extends StatefulWidget 
  @override
  _WelcomeLettersDartState createState() => _WelcomeLettersDartState();


class _WelcomeLettersDartState extends State<WelcomeLettersDart> 
  @override
  Widget build(BuildContext context) 
    return SizedBox(
      width: 340,
      child: Center(
        child: Stack(
          children: [
            Center(
              child: SimpleShadow(
                opacity: 0.7,
                color: Colors.amber,
                offset: Offset(0.0, 2.0),
                sigma: 6.0,
                child: Image.asset(
                  "assets/images/WelcomeLetterD.png",
                  height: 340,
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 32),
                  child: Text(
                    "WELCOME",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                      color: Colors.white,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 88,
                    horizontal: 63,
                  ),
                  child: Text(
                    "Greeting from Letters. This  is a chat application with an old theme of sending letters.",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                  ),
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 200,
                    horizontal: 63,
                  ),
                  child: Text(
                    "Lets look together what we have got :)",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.10,
                    ),
                  ),
                ),
              ),
            ),

看看这里我这里有 280 的垂直填充，我想这会造成所有问题。我还可以使用什么来将文本堆叠在所需位置的图像上？

            Positioned(
              child: Align(
                alignment: Alignment.bottomRight,
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 280,
                    horizontal: 65,
                  ),
                  child: Text(
                    "- Nishan",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  

【问题讨论】：

格式化您的代码以使其可读，并分享原始图像的外观（以确保它在 png 中没有自己的填充）

不要试图通过粘贴代码文本来绕过系统。解释您尝试解决的问题和问题，阅读 *** 上的 how-to-ask

我做了一些修改以使其可读。

【参考方案1】：

使用中心小部件包装堆栈。另外，请将代码格式化，以便于阅读。

【讨论】：

居中没有帮助，但我想我理解我的问题。我的最后一个文本中有 280 的垂直填充。 Positioned(child: Align(alignment: Alignment.bottomRight, child: Padding(padding: const EdgeInsets.symmetric( vertical: 280, horizontal: 65, ), child: Text( "- Nishan") 除了填充我还能用什么？

堆栈中的定位小部件可以取左、右、上和下

【参考方案2】：

是的，所以我对这个问题的看法是正确的，我已经解决了。所以，一直以来我都在错误地使用“定位”小部件。应该是这样的-

Positioned(
   right: 64,
   bottom: 32,
   child: Text(
           "- Nishan",
            style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                 ),
              ),

我使用 paddings 和 alignments 在定位小部件 以在图像上实现所需的位置。但定位小部件本身有其“left:”、“right:”、“top:”和“bottom: em>" 用于在对象上获得所需的位置。

我从flutter.io 看到了正确的用法。 它用额外的空白解决了我的问题。 现在我的定位小部件需要清理很多东西。