Question

当我单击网格项目时，它会打开ModalBottomSheet并列出带有字符串过滤器的芯片。单击筛选器芯片值时，该值将更新，但窗口小部件不会重新呈现。该应用是StatefulWidget。

我已经调用了函数setState。

我期望的是滤芯在选择时变为选中和未选中状态。

void _showBottom(index){
    showModalBottomSheet<void>(
        context: context,

        builder: (BuildContext context){
          return new Container(
            padding: new EdgeInsets.all(27.0),
            child: new Column(
              children: <Widget>[                
                new Text('Some headline', style: new TextStyle(  fontWeight: FontWeight.bold, fontSize: 22),),
                getFilterChipsWidgets(index),
              ],
            ),
          );
        }
    );
  }


Widget getFilterChipsWidgets(index)
  {
    List<Widget> tags_list = new List<Widget>();
      for(var i=0; i<list[index]["tags"].length; i++) {       
        var _isSelected = true;

        FilterChip item = new FilterChip(
          label: Text("Filtertext",), 
          selected: _isSelected,
          onSelected: (bool newValue) {            
            setState(() {
              _isSelected = !_isSelected;
              debugPrint(_isSelected.toString());
            });
          },
        );
        tags_list.add(item);       
      }
      return new Row(children: tags_list);
   }

Answer 1

您需要为底部工作表的根节点添加高度。因此，将您的容器更改为固定高度。

 Container(
     height: 300.0, // Add height
     padding: new EdgeInsets.all(27.0),
     child: new Column(
       children: <Widget>[                
          new Text('Some headline', 
               style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 22),),
                getFilterChipsWidgets(index),
              ],
            ),

我通常会根据传入的小部件动态地进行计算。但这应该可以帮助您入门。

修改

我在下面给出的评论是实际答案。

您应该将底部工作表中的所有小部件包装到其自己的有状态小部件中，然后在其中设置值。

Answer 2

当子窗口小部件中UI发生任何更改（例如，更改表单内的焦点）时，模态底部工作表似乎都会调用构造函数。

因此，您需要在父级 StatefulWidget 中创建要使用的对象的实例，然后在模型底部工作表的UI中反映更改，您需要在每次更改时调用setState。数据。

Answer 3

您需要像这样将 StatefulBuilder 下的部分包裹起来

import 'package:flutter/material.dart';

void _showBottom(index){
showModalBottomSheet<void>(
  context: context,

  builder: (BuildContext context){
    return StatefulBuilder( builder: (BuildContext context, StateSetter setState){
      return new Container(
        padding: new EdgeInsets.all(27.0),
        child: new Column(
          children: <Widget>[
            new Text('Some headline', style: new TextStyle(  fontWeight: FontWeight.bold, fontSize: 22),),
            getFilterChipsWidgets(index, setState),
          ],
        ),
      );
    });
  }
);}


Widget getFilterChipsWidgets(index, StateSetter setState)
{
 List<Widget> tags_list = new List<Widget>();
 for(var i=0; i<list[index]["tags"].length; i++) {
 var _isSelected = true;

  FilterChip item = new FilterChip(
  label: Text("Filtertext",),
  selected: _isSelected,
  onSelected: (bool newValue) {
    setState(() {
      _isSelected = !_isSelected;
      debugPrint(_isSelected.toString());
    });
  },
);
tags_list.add(item);
}
return new Row(children: tags_list);
}

Flutter Bottomsheet Modal不重新呈现

3 个答案: