Question

在Flutter中创建带有长字符串的Text小部件时，将其文本直接放在Column中时会自动换行。但是，当它位于Column-Row-Column内时，文本会溢出屏幕的一侧。

如何在Column-Row-Column内包装文本？造成这种差异的原因是什么？在我看来，上列的任何子级都具有相同的宽度是合乎逻辑的吗？为什么宽度不受限制？

我尝试根据其他答案将文本放在Expanded，Flexible，Container和FittedBox中，但这会导致我不理解的新错误。

示例：

MaterialApp(
  title: 'Text overflow',
  home: Scaffold(
    appBar: AppBar(title: Text("MyApp"),),
    body: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
            Column(
              children: <Widget>[
                Text("Short text"),
                Text("Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
              ],
            ),
          ],
        ),
      ],
    ),
  ), 
)

Answer 1

Row和Column是Flex小部件，如果没有足够的空间抖动，则不会滚动，从而引发溢出错误。

如果发生这种情况，可以使用Expanded或Flexible小部件来包装长文本。

在docs中没有明确说明，但是除了扩展以填充主轴上的可用空间之外，Expanded和Flexible沿横轴方向环绕。

>

漫长的故事

循序渐进的方法可能有助于理解问题。

首先，请考虑以下情形：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text overflow',
      home: Scaffold(
        appBar: AppBar(
          title: Text("MyApp"),
        ),
        body: Column(
          children: List.generate(100, (idx) => Text("Short text"))
        ),
      ),
    );
  }
}

这是一个列窗口小部件，如颤振清楚地报告的那样，它在垂直方向上溢出：

I/flutter ( 8390): The following message was thrown during layout:
I/flutter ( 8390): A RenderFlex overflowed by 997 pixels on the bottom.
I/flutter ( 8390): 
I/flutter ( 8390): The overflowing RenderFlex has an orientation of Axis.vertical.

现在，在列中一行：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text overflow',
      home: Scaffold(
        appBar: AppBar(title: Text("MyApp"),),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Text(String.fromCharCodes(List.generate(100, (i) => 65)))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

现在，溢出问题出现在右侧。

我只是在一个列中插入了一行，以类似于您的情况，但是如果您使用一个简单的Row小部件，则会出现完全相同的问题： Row和Column都是Flex小部件：

他们沿一个方向布置孩子；
它们不会滚动，因此如果子级占用的空间超出可用空间，则会引发溢出错误；

扩展小部件

考虑此布局，一行包含两个项目，样式化为togheter

Column(
  children: <Widget>[
    Row(
      children: <Widget>[Text('AAAA'), Text('ZZZZ')],
    ),
  ],
),

现在第一个项目Expanded会填满所有可用空间：

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text('AAAA')),
        Text('ZZZZ')],
    ),
  ],
),

最后，当您扩展一个非常长的字符串时，您会注意到文本在横轴方向上换行：

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
        Text('ZZZZ')],
    ),
  ],
),

Answer 2

您需要使用-Column或Expanded小部件包装最后一个Flexible。

那样Column可以占用文本所需的可用空间。

body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
              Expanded(
                child: Column(
                  children: <Widget>[
                    Text("Short text"),
                    Text(
                        "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
                  ],
                ),
              ),
            ],
          ),
        ],
      ),

Answer 3

为避免行或列中的文本溢出。确保将文本包装在“灵活”或“扩展”小部件下。将文本包装在上述小部件之一下后，它将大文本包装成多行。共享示例：

展开小部件之前：

return  Center(child:
        Container(
        padding: EdgeInsets.only(left: 50, right: 50),
          child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: 200,
                 child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white)),

          )
          ],
        ))
      );

屏幕截图：

在内部包装后展开：

  return  Center(
        child: Padding(padding:  EdgeInsets.only(left: 50, right: 50),
          child:  Row(
            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[
              Expanded(

                  child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
            ],
          ),
        )
      );

屏幕截图：

Answer 4

Flutter提供了一个非常有用的小部件，名为Wrap，可以轻松地水平和垂直地包装其子级。

Wrap(
  direction: Axis.horizontal, //default
  alignment: WrapAlignment.center,
  children: [
    Text(),   //you can use any other widget
    Text(),
    Text(),
    Text(),
    Text(),
  ],
),

Answer 5

在Flexible上使用Column小部件，因为它仅占用所需的可用空间。

Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
            Flexible(
              child: Column(
                children: <Widget>[
                Text("Short text"),
                  Text(
                      "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
                ],
              ),
            ),
          ],
        ),
      ],
    ),

输出：

Answer 6

Use Expanded as I used 并解决了问题... 如果使用得当，Expanded 可以解决这个文本溢出问题。下面是我的代码：

Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: Icon(
                                    Icons.watch_later_outlined,
                                    size: 25,
                                    color: Colors.blueAccent,
                                  ),
                                ),
                                Expanded(
                                  flex: 5,
                                  child: Text("Write your long text here"
                                  ),
                                ), // name
                              ]),

Answer 7

您可以使用 RichText

import 'package:flutter/gestures.dart';

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

具有手势检测

的RichText

RichText
(
    text: TextSpan
    (
        style: TextStyle( color: Color(0xffaabbcc) ),
        text: 'By clicking SIGNUP button you acknowledge that you have read our',
        children: <TextSpan>
        [
            TextSpan
            (
                text: ' Privacy Policy', style: linkStyle(),
                recognizer: TapGestureRecognizer() ..onTap = showPrivacyPolicy
            ),

            TextSpan( text: ' and you agree to our' ),
            TextSpan
            (
                text: ' Terms', style: linkStyle(),
                recognizer: TapGestureRecognizer() ..onTap = showTerms
            ),
        ],
    ),
);

结果

Answer 8

Text(
     "Very long text. Very long text. Very long text. Very long text. Very long text. 
      Very long text. Very long text. Very long text. Very long text. Very long text. 
      Very long text. Very long text. Very long text. Very long text. Very long text. 
      Very long text. Very long text. ",
     style: softWrap: true,
    ),

样式：softWrap：是，文本小部件中的属性也将达到目的。

颤动换行而不是溢出文本

8 个答案:

漫长的故事

扩展小部件