Flutter底部弹出框模态框不重新渲染

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

- Niru

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),
              ],
            ),

我通常根据传入的小部件动态计算这个值。但这应该能帮你入门。

编辑

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

你应该把底部工作表中的所有小部件都包装到它自己的有状态小部件中，并在其中设置你的值。

- Filled Stacks

---

@Mark，对不起，我完全误读了你的问题。现在通过修改有所帮助。模态值不会在屏幕上重新渲染，必须关闭并重新打开。您应该将底部表中的所有小部件包装成自己的有状态小部件，并在其中设置您的值。我认为这应该可以解决它。 - Filled Stacks

谢谢，把底部单元格中的所有小部件包装到自己的有状态小部件中，就成功了！ - Niru

@Mark 太棒了。我会编辑答案，然后你可以接受它。 - Filled Stacks

Answer 2

Modal底部表似乎在UI的子小部件中发生任何更改时都会调用构造函数，例如在表单内更改焦点。

因此，您需要在父级StatefulWidget中创建与之一起工作的对象的实例，然后在对数据进行更改时，需要调用setState来反映Model Bottom Sheet的UI中的更改。

- Mozart

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

- Mukesh Yadav