BoxConstraints(w=Infinity, 0.0<=h<=Infinity) |如何整顿？

Posted 2023-02-23

【中文标题】BoxConstraints(w=Infinity, 0.0<=h<=Infinity) |如何整顿？

【英文标题】：BoxConstraints(w=Infinity, 0.0<=h<=Infinity) | How to rectify?

【发布时间】：2020-09-03 16:41:35

【问题描述】：

文本未在我的应用程序主页上呈现，这是我遇到问题的地方。我不熟悉颤动，因此不熟悉约束。希望有人能提供一些见解，或者根据我得到的错误调整代码。

关于进一步的上下文，当我启动“颤动运行”时，此页面将呈现。背景图片会出现，但文字不会出现。

提前致谢。

错误是：

flutter: EXCEPTION CAUGHT BY RENDERING LIBRARY 

flutter: The following assertion was thrown during performLayout():     
flutter: BoxConstraints forces an infinite width.                       
flutter: These invalid constraints were provided to RenderPositionedBox's layout() function by the following
flutter: function, which probably computed the invalid constraints in question:
flutter:   RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:746:15)
flutter: The offending constraints were:                                
flutter:   BoxConstraints(w=Infinity, 0.0<=h<=Infinity

相关代码为：

        /*
*  home_widget.dart
import 'package:flutter/material.dart';
import 'package:stumble/slider1_widget/slider1_widget.dart';
import 'package:stumble/values/values.dart';


class HomeWidget extends StatelessWidget 
  
  void onGroup2Pressed(BuildContext context) => Navigator.push(context, MaterialPageRoute(builder: (context) => Slider1Widget()));
  
  @override
  Widget build(BuildContext context) 
  
    return Scaffold(
      body: Container(
        constraints: BoxConstraints.expand(),
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 255, 255, 255),
        ),
        child: Stack(
          children: [
            Positioned(
              left: -133,
              top: -269,
              right: -255,
              child: Image.asset(
                "assets/images/group-5.png",
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              left: 28,
              top: 400,
              bottom: 67,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Opacity(
                      opacity: 0.85951,
                      child: Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Color.fromARGB(128, 0, 0, 0),
                              offset: Offset(12, 4),
                              blurRadius: 20,
                            ),
                          ],
                        ),
                        child: Text(
                          "Look",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromARGB(255, 255, 255, 255),
                            fontFamily: "Open Sans",
                            fontWeight: FontWeight.w700,
                            fontSize: 21,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Spacer(),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Opacity(
                      opacity: 0.58538,
                      child: Container(
                        width: 166,
                        margin: EdgeInsets.only(bottom: 51),
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Color.fromARGB(128, 0, 0, 0),
                              offset: Offset(0, 2),
                              blurRadius: 4,
                            ),
                          ],
                        ),
                        child: Text(
                          "I spent a year after College.
    ",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromARGB(255, 255, 255, 255),
                            fontFamily: "Arial",
                            fontWeight: FontWeight.w700,
                            fontStyle: FontStyle.italic,
                            fontSize: 13,
                            height: 1.23077,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      width: 140,
                      height: 44,
                      child: FlatButton(
                        onPressed: () => this.onGroup2Pressed(context),
                        color: Color.fromARGB(0, 0, 0, 0),
                        shape: RoundedRectangleBorder(
                          side: BorderSide(
                            color: Color.fromARGB(255, 255, 255, 255),
                            width: 3,
                            style: BorderStyle.solid,
                          ),
                          borderRadius: Radii.k8pxRadius,
                        ),
                        textColor: Color.fromARGB(255, 255, 255, 255),
                        padding: EdgeInsets.all(0),
                        child: Text(
                          "Get Started",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromARGB(255, 255, 255, 255),
                            fontFamily: "Open Sans",
                            fontWeight: FontWeight.w700,
                            fontSize: 17,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              left: 28,
              top: 424,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            color: Color.fromARGB(128, 0, 0, 0),
                            offset: Offset(12, 11),
                            blurRadius: 27,
                          ),
                        ],
                      ),
                      child: Text(
                        "Personal\nTravel",
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          color: Color.fromARGB(255, 255, 255, 255),
                          fontFamily: "Open Sans",
                          fontWeight: FontWeight.w700,
                          fontSize: 36,
                          height: 1.25,
                        ),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      margin: EdgeInsets.only(top: 11),
                      child: Opacity(
                        opacity: 0.48268,
                        child: Text(
                          "“",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromARGB(255, 255, 255, 255),
                            fontFamily: "Arial",
                            fontWeight: FontWeight.w400,
                            fontSize: 55,
                            height: 1,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  

图片如下。忽略文本后面的框，因为它们不应该在那里。这只是为了给出格式的想法。

【问题讨论】：

请提供您想要实现的布局图像。我相信您通过滥用堆栈定位的小部件而犯了常见的愚蠢错误

@delmin 现在包含示例图像。请忽略文本后面的框。没有确切的设计文件，但这是来自较早的模型。

@delmin 是对的。请按照以下步骤在屏幕上添加背景图像***.com/questions/44179889/… 并删除所有堆栈和定位小部件...

【参考方案1】：

这是一个简单的例子。记住堆栈是为了将小部件放在一起！您应该避免专门使用堆栈来创建布局

body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
                'your/image'),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    child: Text("Text1"),
                    color: Colors.white,
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Container(
                    child: Text("text2"),
                    color: Colors.white,
                  ),
                  OutlineButton(
                    child: Text('Button'),
                    onPressed: () ,
                  )
                ],
              ),
            ]),
      ),