首页 文章

在构建期间调用setState()或markNeedsBuild

提问于
浏览
7
class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyHomePage2();
}

class MyHomePage2 extends State<MyHome> {
  List items = new List();

  buildlist(String s) {
    setState(() {
      print("entered buildlist" + s);
      List refresh = new List();
      if (s == 'button0') {
        refresh = [
          new Refreshments("Watermelon", 250),
          new Refreshments("Orange", 275),
          new Refreshments("Pine", 300),
          new Refreshments("Papaya", 225),
          new Refreshments("Apple", 250),
        ];
      } else if (s == 'button1') {
        refresh = [
          new Refreshments("Pina Colada", 250),
          new Refreshments("Bloody Mary", 275),
          new Refreshments("Long Island Ice tea", 300),
          new Refreshments("Screwdriver", 225),
          new Refreshments("Fusion Cocktail", 250),
        ];
      } else if (s == 'button2') {
        refresh = [
          new Refreshments("Virgin Pina Colada", 250),
          new Refreshments("Virgin Mary", 275),
          new Refreshments("Strawberry Flush", 300),
          new Refreshments("Mango Diver", 225),
          new Refreshments("Peach Delight", 250),
        ];
      } else {
        refresh = [
          new Refreshments("Absolute", 250),
          new Refreshments("Smirnoff", 275),
          new Refreshments("White Mischief", 300),
          new Refreshments("Romanov", 225),
          new Refreshments("Blender's Pride", 250),
        ];
      }

      for (var item in refresh) {
        items.add(new ItemsList(item));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    var abc = MediaQuery.of(context).size;

    print(abc.width);

    var width = abc.width / 4;

    Text text = new Text("Dev");
    Text text2 = new Text("Sneha");
    Text text3 = new Text("Prashant");
    Text text4 = new Text("Vikesh");

    var pad = const EdgeInsets.all(10.0);

    Padding pad1 = new Padding(child: text, padding: pad);
    Padding pad2 = new Padding(child: text2, padding: pad);
    Padding pad3 = new Padding(child: text3, padding: pad);
    Padding pad4 = new Padding(child: text4, padding: pad);

    ListView listView = new ListView(children: <Widget>[
      new Image.asset('images/party.jpg'),
      pad1,
      pad2,
      pad3,
      pad4
    ]);

    Drawer drawer = new Drawer(child: listView);

    return new Scaffold(
      drawer: drawer,

      appBar: new AppBar(
        title: new Text('Booze Up'),
      ),
      body: new Column(children: <Widget>[
        new ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return new Column(children: <Widget>[
              new Container(
                child: new Flexible(
                    child: new FlatButton(
                  child: new Image.asset('images/party.jpg',
                      width: width, height: width),
                  onPressed: buildlist('button' + index.toString()),
                )),
                width: width,
                height: width,
              )
            ]);
          },
        ),
        new Expanded(
            child: new ListView(
          padding: new EdgeInsets.fromLTRB(10.0, 10.0, 0.0, 10.0),
          children: items,
          scrollDirection: Axis.vertical,
        )),
      ]),

      floatingActionButton: new FloatingActionButton(
        onPressed: null,
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class Refreshments {
  String name;
  int price;

  Refreshments(this.name, this.price);
}

class ItemsList extends StatelessWidget {
  final Refreshments refreshments;

  ItemsList(this.refreshments);

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap: null,
      title: new Text(refreshments.name),
    );
  }
}

Formatted by DartPad ;-)

我有两个错误:

1]水平视口被赋予无限高度 . 水平视口被赋予了无限量的垂直空间,可以在其中展开 .

2]在构建期间调用的setState()或markNeedsBuild由99488像素溢出的垂直renderflex .

请帮帮我 . 我正在创建这个应用程序,在每个图像上单击列表应显示如下 . 图像将排成一行,列表应显示在行下方 .

谢谢 .

2 回答

  • 27

    我已经重新创建了你想要做的事情,只有两个你的Refreshment项目,你可能想要以更好的方式重构事物并处理布局,但为了简单起见,试着按照这个例子并将它与什么进行比较你正在努力实现:

    enter image description here

    import "package:flutter/material.dart";
    
    class LetsParty extends StatefulWidget {
      @override
      _LetsPartyState createState() => new _LetsPartyState();
    }
    
    class _LetsPartyState extends State<LetsParty> {
      Image _partyImage = new Image.network(
          "http://www.freshcardsgifts.co.uk/images/_lib/animal-party-greetings-card-3003237-0-1344698261000.jpg");
    
      final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
    
      List<List> list = [
        ["Pina Colada",
        "Bloody Mary",
        "Strawberry Flush",
        "Mango Diver",
        "Peach Delight"
        ],
        [
          "Absolute",
          "Smirnoff",
          "White Mischief",
          "Romanov",
          "Blender's Pride"
        ]
      ];
    
      List<String> visibleList = null;
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          key: scaffoldKey,
          appBar: new AppBar(title: new Text("Let's Party"),),
          body: new ListView(
            // shrinkWrap: true,
            children: <Widget>[
    
    
              new Container (
                  height: 150.0,
                  child: new ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: 2, //add the length of your list here
                      itemBuilder: (BuildContext context, int index) {
                        return new Column(
                          children: <Widget>[
    
                            ///Flexible let's your widget flex in  the given space, dealing with the overflow you have
                            //  new Flexible(child: new FlatButton(onPressed: ()=>print("You pressed Image No.$index"), child: _partyImage)),
                            new Flexible (child: new Container(
                                child: new FlatButton(onPressed: () {
                                  scaffoldKey.currentState.showSnackBar(
                                      new SnackBar(
                                          content: new Text(
                                              "You pressed Image No.$index")));
    
                                  setState(() {
                                    visibleList = list[index];
                                  });
                                },
                                    child: _partyImage),
                                width: 100.0,
                                height: 100.0
                            ),),
                            //Exact width and height, consider adding Flexible as a parent to the Container
                            new Text("Text$index"),
                          ],
                        );
                      })),
    
              new Column(children: visibleList==null?new List():new List.generate(5, (int i) {
                new ListTile(title: new Text(visibleList[i]),
                  onTap: () =>
                      scaffoldKey.currentState.showSnackBar(new SnackBar(
                        content: new Text("Your choise is ${visibleList[i]}"),)),
                );
              }))
            ],),);
      }
    }
    
  • 3

    你的代码

    onPressed: buildlist('button'+index.toString()),
    

    执行 buildlist() 并将结果传递给 onPressed ,但这不是所需的行为 .

    它应该是

    onPressed: () => buildlist('button'+index.toString()),
    

    这样一个函数(闭包)传递给 onPressed ,执行时调用 buildlist()

相关问题