使用 firebase 的实时数据库时，CheckboxListTile 无法正常工作

Question

我正在尝试使用 StreamBuilder 从在线服务器 Firebase 创建数据列表，但不会选中复选框。

我使用 StreamBuilder 来获取数据并使用 LisTile 小部件来构建列表项，但是在定义 setState() 函数后， checkboxtilelist 小部件将无法工作。 buildBody 定义在 build Widget 类下。

Widget buildBody(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection('hisab').snapshots(),
    builder: (context, snapshots) {
      if (!snapshots.hasData) {
        return LinearProgressIndicator();
      }
      return _buildList(context, snapshots.data.documents);
    }
  );
}

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
  return ListView(
    padding: EdgeInsets.only(top: 20.0),
    children: snapshot.map((data) => _buildListitem(context, data)).toList(),
  );
}

Widget _buildListitem(BuildContext context, DocumentSnapshot data) {
  final record = Record.fromSnapshot((data));
  bool _values = false;
  void _onChanged(bool newValue) {
    setState(() {
      _values = newValue;
    });
  }

  return Padding(
    padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 9.0),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(5.0),
      ),
      child: new ListTile(
        onTap: () {
          _onChanged(!_values);
        },
        leading: CircleAvatar(child: Text(record.name[0])),
        title: new Column(
          children: <Widget>[
            new CheckboxListTile(
              title: Text(record.name),
              value: _values,
              onChanged: _onChanged,
            )
          ],
        ),
      ),
    ),
  );
}

Answer 1

如果您创建新的有状态小部件类是个好主意：

class CustomListItemWidget extends StatefulWidget {
  CustomListItemWidget({Key key, @required this.record}) : super(key: key);

  final record;

  @override
  State createState() => _CustomListItemWidgetState();
}

class _CustomListItemWidgetState extends State<CustomListItemWidget> {

  bool _values = false;
  void _onChanged(bool newValue) {
    setState(() {
      _values = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 9.0),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: new ListTile(
          onTap: () {
            _onChanged(!_values);
          },
          leading: CircleAvatar(child: Text(widget.record.name[0])),
          title: new Column(
            children: <Widget>[
              new CheckboxListTile(
                title: Text(widget.record.name[0]),
                value: _values,
                onChanged: _onChanged,
              )
            ],
          ),
        ),
      ),
    );
  }
}

接下来，您可以从方法 _buildListitem 传递值：

Widget _buildListitem(BuildContext context, DocumentSnapshot data) {
  return CustomListItemWidget(
    record: Record.fromSnapshot((data)),
  );
}