flutter换文本而不是溢出

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"))
        ),
      ),
    );
  }
}

它是一个列小部件，它在垂直方向上溢出，如flutter清楚地报告：

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小部件：

• 他们把孩子安排在一个方向;
• 它们不会滚动，所以如果孩子占用的空间超过可用空间，则会出现溢出错误;

Expanded小部件

考虑这个布局，一行有两个项目，缝合在一起

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

你可以使用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
            ),
        ],
    ),
);

结果