Flutter 渲染问题答案

【问题标题】：Flutter rendering issueFlutter 渲染问题
【发布时间】：2018-05-16 06:57:09
【问题描述】：

我是 Flutter 移动开发的新手。我有一个 dart 文件，它从我的本地主机获取 JSON 数据。现在我希望在 listView 中显示数据。

但我在日志中得到以下信息

I/flutter (23058):   EXCEPTION CAUGHT BY RENDERING LIBRARY 
I/flutter (23058): The following message was thrown during layout:
I/flutter (23058): A RenderFlex overflowed by 242 pixels on the right.

下面是我显示视图的代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Timeline"),
        backgroundColor: Colors.orange,
      ),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Center(
              child: Row(
                children: <Widget>[
                  new Card(
                    child: new Container(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Text(
                            data[index]["text"],
                            softWrap: true,
                            style: new TextStyle(
                              fontFamily: 'Hind',
                              fontSize: 17.0, color: Colors.black87
                            )
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

【问题讨论】：

标签： android dart flutter flutter-layout

【解决方案1】：

将您的卡片包装在 Expanded 小部件中。

return Container(
            child: Center(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: new Card(
                      child: new Container(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            new Text(data[index],
                                softWrap: true,
                                //overflow: TextOverflow.ellipsis,
                                style: new TextStyle(
                                    fontFamily: 'Hind',
                                    fontSize: 17.0,
                                    color: Colors.black87)),
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          );

屏幕截图

【讨论】：

非常感谢朋友。它有帮助。