当 Stack 是父级时，文本在行中溢出

Question

我正在尝试创建一个行小部件，其中包含两个文本小部件，但是文本一直溢出屏幕而不是直接在屏幕下方。为什么会发生这种情况，我该如何避免这种情况？

   @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 40.0),
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/main_cover.jpg"),
                fit: BoxFit.cover)),
        child: Stack(children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20,0,20,0),
                child: InkWell(
                  onTap: () => _launchURL(),
                    child: Container(
                      child: Row(
                        children: [
                          DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
                          DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
                        ],
                      ),
                    )),
            
          ),
        ]),
      ),
    ));
  }
}

Answer 1

使用灵活如下：

Row(
          children: [
            Flexible(
              child:DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
            ),
            Flexible(
              child:
              DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
            ),

          ],
        )

这会使您的文本变形。

但是我建议你应该使用 RichText。

RichText(
        text: TextSpan(
            text: 'By clicking the \"Register\", button confirm that you accept the application',
            style: TextStyle(
                color: Colors.black, fontSize: 18),
            children: <TextSpan>[
              TextSpan(text: 'Terms and policy',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // navigate to desired screen
                    }
              )
            ]
        ),
      ),

Answer 2

尝试将您的 children 包装在 Flexible() 小部件中

像这样：

Flexible(
   Text()
),

Answer 3

row 水平对齐它的子项，这意味着您的第一个 DefaultText 小部件已呈现，第二个在它的右侧。

你可以做的是将两个子项都包裹在 Expanded 中并使文本溢出淡出并使用 Text 而不是 DefaultText :

Stack(children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20,0,20,0),
                child: InkWell(
                  onTap: () => _launchURL(),
                    child: Container(
                      child: Row(
                        children: [
                          Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.white, fontWeight: FontWeight.normal,overflow: TextOverflow.fade),"By clicking the \"Register\", button confirm that you accept the application")),
                          Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.blue, fontWeight: FontWeight.normal,overflow: TextOverflow.fade) ,"terms of service and privacy policy.")),
                        ],
                      ),
                    )),
            
          ),
        ]),

Answer 4

在行中使用 Flexible。

 Example:Row(
                    children: [
                      Flexible(
                        child: DefaultText(
                            fontSize: 12.0,
                            color: Colors.white,
                            weight: FontWeight.normal,
                            textData:
                                "By clicking the \"Register\", button confirm that you accept the application"),
                      ),
                      Flexible(
                        child: DefaultText(
                            fontSize: 12.0,
                            color: Colors.blue,
                            weight: FontWeight.normal,
                            textData: "terms of service and privacy policy."),
                      )
                    ],
                  )

Answer 5

您应该将 Container 包装在 Flexible 中，让您的 Row 知道 Container narrower 比 intrinsic width 没问题. Expanded 也可以。

当 Stack 是父级时，文本在行中溢出

Text overflowing in row when Stack is a parent

flutter

dart

flutter-layout