Question

我在将文本包装在堆积的列和行中时遇到了一些麻烦（而且我不确定我是否在做良好的练习；）。我尝试了“ Flexible”而不是“ 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),
  ])))
]);

Answer 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),
                      ])))
        ]);

堆积的列和行中的Flutter Textwrapping

1 个答案: