Flutter UI失真

Question

嗨，我正在尝试构建和用户界面

标题

IMG

描述

但因为我的标题是2大，主要是2行我得到EXCEPTION CAUGHT BY RENDERING LIBRARY我的代码如下：

Widget _buildRowItem() {
    final Row mainRow = new Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        new Text(_feed.getTitle(),
            maxLines: 2, softWrap: true, textAlign: TextAlign.start),
      ],
    );
    final Container container = new Container(
      child: mainRow,
      padding: const EdgeInsets.all(4.0),
      color: Colors.teal,
    );

    return container;
  }

输出：

Answer 1

几乎与你的方法一起！

添加一个灵活的包装器并完成它。

  Widget _buildRowItem() {
final Row mainRow = new Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    new Flexible(child: new Text('some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text ',
        maxLines: 2, softWrap: true, textAlign: TextAlign.start))

  ],
);
final Container container = new Container(
  child: mainRow,
  padding: const EdgeInsets.all(4.0),
  color: Colors.teal,
);

return container;

}

Answer 2

you can use here Extended or Flexible with container specific hight

for example

 Container(
            width: MediaQuery.of(context).size.width / 1.3,
            height: MediaQuery.of(context).size.height/3.5,
            padding: EdgeInsets.all(0.5),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                verticalDirection: VerticalDirection.down,
                textDirection: TextDirection.ltr,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children:
                List.generate(mEmiMessagesList.length, (index) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Wrap(
                        children: <Widget>[
                          Text(
                            mEmiMessagesList[index].mValue,
                            textDirection: TextDirection.ltr,
                          )
                        ],
                      ),
                    ],
                  );
                })),
          ),

Answer 3

谢谢，我感谢您的回复，

这之间解决了我的问题

Widget _buildRowItem() {
    final Column column = new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Text(_feed.getTitle(),
            textAlign: TextAlign.start,
            softWrap: true,
            maxLines: 2,
            overflow: TextOverflow.ellipsis),
        new Container(height: 8.0),
        new Image.network(
          _feed.getImageUrl(),
          height: 164.0,
          fit: BoxFit.fitWidth,
        )
      ],
    );
    final Container container =
        new Container(padding: const EdgeInsets.all(8.0), child: column);

    return new Card(child: container);
  }

用户界面：