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

UI：