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小部件。

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

Answer 2

要在“行”小部件中运行它，您可能必须给容器指定一定的宽度以适合

赞：

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

垂直视口的宽度不受限制

已更新

最终更新

2 个答案: