如何让你的文本在一行内换行？答案

【问题标题】：How to make your text wrap inside a row?如何让你的文本在一行内换行？
【发布时间】：2019-06-05 05:32:13
【问题描述】：

我在一行中有一个文本小部件，我正在从 API 中检索谁的文本，并且有时会变得很长。我希望文本在太长时换行并移至下一行，但是它会溢出。有没有办法来解决这个问题？谢谢

我的代码

  return  ListView.builder(
       itemCount: values == null ? 0 : values.length,
       itemBuilder: (BuildContext context, int index) {
         return Ink(
           child: InkWell(
             child: Card(
                 child: Padding(
                   padding: const EdgeInsets.all(16.0),
                   child: Column(
                     children: <Widget>[
                     .......
                       Row(children: <Widget>[Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
                         Padding(
                           padding: const EdgeInsets.only(left: 10.0),
                           child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize: 15.0), maxLines: 2, overflow: TextOverflow.clip,),   //TEXT HERE 
                         )],),
                    .....
                     ],
                   ),
                 ),
               ),

           ),
         );
       },
     );

编辑：

我尝试使用 Expanded （和 Flexible ）来包装我的行，但是它给出了以下错误：

I/flutter (16255): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (16255): The following assertion was thrown during performLayout():
I/flutter (16255): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (16255): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (16255): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (16255): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (16255): space in the vertical direction.
I/flutter (16255): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (16255): cannot simultaneously expand to fit its parent.
I/flutter (16255): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (16255): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (16255): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (16255): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (16255): constraints provided by the parent.

这是因为我的列位于 ListView Card 中。有没有其他方法可以解决这个问题？

我尝试了控制台中给出的建议，但没有奏效。

【问题讨论】：

标签： flutter

【解决方案1】：

我有同样的问题并解决了！

检查一下，它有示例代码和屏幕截图 https://gist.github.com/yamarane/9269513a3c21eafb93a782fc387b9785

更新（工作！）：

import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Some()),
    );
  }
}

var values = [
  "111111111111111111111111111qqqqqqqqqqqqqqqqqqqqqqq",
  "222222222222222222222222222222222",
  "333333333333333333333333333",
  "4"
];

class Some extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: values == null ? 0 : values.length,
      itemBuilder: (BuildContext context, int index) {
        return Ink(
          child: InkWell(
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
                    Container(
                      padding: const EdgeInsets.only(left: 10.0),
                      width: MediaQuery.of(context).size.width * 0.8,
                      child: Text(
                        values[index],
                        style: TextStyle(color: Colors.grey, fontSize: 15.0),
                      ), //TEXT HERE
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

【讨论】：

嗨！我试过了，但仍然报错，我已经在我的问题中为它写了一个编辑！

【解决方案2】：

这是因为 Row 包裹了您的 Text，包裹在 Column 中，因此它没有定义的宽度。用Expanded 包裹您的Row 以提供预定义的宽度以填充剩余空间。

Expanded(
  child: Row(
    children: <Widget>[
      Icon(
        Icons.account_balance,
        size: 13.0,
        color: Colors.grey
      ),
    Padding(
      padding: const EdgeInsets.only(left: 10.0),
      child: Text(
        values[index].societyName,
        style: TextStyle(color: Colors.grey, fontSize: 15.0), 
        maxLines: 2,
        overflow: TextOverflow.clip,
      ), //TEXT HERE 
    ),
  ],
),

【讨论】：

嗨！我试过了，但仍然报错，我已经在我的问题中为它写了一个编辑！
把你的Expanded比你的Column低一级

【解决方案3】：

试试扩展属性

Expanded(
  child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize: 
 15.0), maxLines: 2, overflow: TextOverflow.clip,),
 )

【讨论】：

【解决方案4】：

Flexible(
    child:  Padding(
         padding: const EdgeInsets.only(left: 10.0),
          child: Text(values[index].societyName, 
                style: TextStyle(color: Colors.grey, fontSize: 15.0), 
                maxLines: 2, 
                overflow: TextOverflow.clip,),   //TEXT HERE 
    )
)

【讨论】：

嗨！我试过了，但仍然报错，我已经在我的问题中为它写了一个编辑！