Flutter Textwrapping 在堆叠的列和行中答案

【问题标题】：Flutter Textwrapping in stacked columns and rowsFlutter Textwrapping 在堆叠的列和行中
【发布时间】：2018-08-12 17:07:23
【问题描述】：

我在将文本包装在堆叠的列和行中时遇到了一些麻烦（而且我不太确定我是否在做良好的做法；））。我尝试了灵活而不是 Wrapped，但它也不起作用。

代码：

ListView(children: <Widget>[
  Card(child: Padding(padding: EdgeInsets.all(16.0), child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
    Text('Subhead', style: Theme.of(context).textTheme.subhead),
    Padding(padding: EdgeInsets.only(bottom: 8.0)),
    Row(crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[
      Text('Row title:', style: Theme.of(context).textTheme.caption),
      Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
        Text('24.04.2018', style: Theme.of(context).textTheme.caption),
        Wrap(children: <Widget>[ Text('Very, very, very, very long text that needs to wrap', softWrap: true, style: Theme.of(context).textTheme.caption)],),
        Text('Another line of text', style: Theme.of(context).textTheme.caption),
      ])
    ]),
    Padding(padding: EdgeInsets.only(bottom: 8.0)),
    Text('Next row title', style: Theme.of(context).textTheme.body1),
  ])))
]);

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

有很多方法可以解决您的问题，其中之一是使用 Flex 和 Flexible，如下所示：

    return ListView(shrinkWrap: true, children: <Widget>[
          Card(
              child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text('Subhead',
                            style: Theme.of(context).textTheme.subhead),
                        Padding(padding: EdgeInsets.only(bottom: 8.0)),
                        Flex(
                            direction: Axis.horizontal,
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.max,
                            children: <Widget>[
                              Flexible(
                                fit: FlexFit.tight,
                                flex: 1,
                                child: Text('Row title:',
                                    style: Theme.of(context).textTheme.caption),
                              ),
                              Flexible(
                                fit: FlexFit.tight,
                                flex: 4,
                                child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.stretch,
                                    children: <Widget>[
                                      Text('24.04.2018',
                                          style: Theme.of(context)
                                              .textTheme
                                              .caption),
                                      Text(
                                          'Very, very, very, very long text that needs to wrap',
                                          softWrap: true,
                                          style: Theme.of(context)
                                              .textTheme
                                              .caption),
                                      Text('Another line of text',
                                          style: Theme.of(context)
                                              .textTheme
                                              .caption),
                                    ]),
                              )
                            ]),
                        Padding(padding: EdgeInsets.only(bottom: 8.0)),
                        Text('Next row title',
                            style: Theme.of(context).textTheme.body1),
                      ])))
        ]);

【讨论】：