listview - 垂直视口被赋予无限宽度

Question

我是 Flutter 的新手，显然被一些我无法弄清楚的微不足道的事情困住了。

这是一个有状态的类：

class Menu extends StatefulWidget {
  Menu({Key key}) : super(key: key);
  @override
  MenuState createState() => MenuState();
}

class MenuState extends State<Menu> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Padding(padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0)),
          new FetchSummary(context: context),
        ],
      ),
    );
  }
}

在这个类中，我调用 FetchSummary。这个想法是从 JSON 文件中获取数据，该文件将在以后动态更改。

class FetchSummary extends StatefulWidget {
  FetchSummary({Key key, this.context}) : super(key: key);
  final BuildContext context;

  @override
  FetchSummaryState createState() => FetchSummaryState();
}

class FetchSummaryState extends State<FetchSummary> {
  var _jsonFile = "assets/db-summaryData.json";

  @override
  Widget build(BuildContext context) {
    return new FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString(_jsonFile),
        builder: (context, snapshot) {
          var myData = json.decode(snapshot.data.toString());
          if (snapshot.data == null) {
            return Container(child: Center(child: Text("Loading...")));
          } else {
            //List<Post> yourPosts = snapshot.data.posts;
            return Column(children: <Widget>[
              Flexible(
                  child: ListView.builder(
                      //scrollDirection: Axis.vertical,
                      //shrinkWrap: true,
                      itemCount: myData.length,
                      padding: const EdgeInsets.only(bottom: 50),
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                            //margin: const EdgeInsets.symmetric(vertical: 1),
                            color: Color.fromRGBO(107, 164, 147, 0.5),
                            child: ListTile(
                              title: new Text(
                                "Dummy Text",
                              ),
                            ));
                      }))
            ]);
          }
        });
  }
}

目前，在这个小部件中，我只是想在从 myData JSON 对象中获取任何内容之前发回一些文本。但是，当我尝试运行时，它开始抱怨如下：

The following assertion was thrown during performResize():
**Vertical viewport was given unbounded width.**

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a vertical viewport was given an unlimited amount of horizontal space in which to expand.
The relevant error-causing widget was: 
  ListView file:///D:/FlutterDev/Dashboard/dashboard/lib/main.dart:149:35
When the exception was thrown, this was the stack: 
#0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1191:15)

更新

如果我将 FutureBuilder 移动/复制到调用函数而不是作为一个类调用它，它可以正常工作。**

  Widget build(BuildContext context) {
    return new FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString(_jsonFile),
        builder: (context, snapshot) {
          var myData = json.decode(snapshot.data.toString());
          if (snapshot.data == null) {
            return Container(child: Center(child: Text("Loading...")));
..............

最终更新

我从此替换了调用代码：

return new Container(
  child: new Row(
    children: <Widget>[
      new Padding(padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0)),
      new FetchSummary(context: context),
    ],
  ),
);

对此：

return new Container(
  child:
      new FetchSummary(context: context),
  );

它奏效了。我认为它不喜欢 Row 小部件。

标签： listviewflutter

Answer 1

尝试这个

return  ListView.builder(
                      //scrollDirection: Axis.vertical,
                      //shrinkWrap: true,
                      itemCount: myData.length,
                      padding: const EdgeInsets.only(bottom: 50),
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                            //margin: const EdgeInsets.symmetric(vertical: 1),
                            color: Color.fromRGBO(107, 164, 147, 0.5),
                            child: ListTile(
                              title: new Text(
                                "Dummy Text",
                              ),
                            ));
                      });