flutter - 直到滚动到底部，屏幕才能实时更新

我目前正在学习Flutter，我想创建动态的ToggleButtons
但我不知道为什么在单击ToggleButtons并滚动到底部后无法刷新。
这是代码的页面:

import 'dart:convert';

import 'package:flutter/material.dart';


class TestArea extends StatefulWidget {
  @override
  _TestArea createState() => _TestArea();
}

class _TestArea extends State<TestArea> {
  List<List<bool>> boo=[[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false],[true,false,false]];
  var _myPets = List<Widget>();

  int _index = 0;

  void _add(String name) {
    int keyValue = _index;
    _myPets = List.from(_myPets)
      ..add(
        Column(
        children: <Widget>[
          ListTile(
            leading: Text(name),
          ),
          Container(
            alignment: Alignment.center,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            child: ToggleButtons(
                children: <Widget>[
                  Icon(Icons.ac_unit),
                  Icon(Icons.call),
                  Icon(Icons.cake),
              ],
              onPressed: (int index) {
              setState(() {
                  boo[keyValue][index] = !boo[keyValue][index];
                });
              },
              isSelected: boo[keyValue],
            ),
          )
        ],
      ));

    setState(() => ++_index);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(int i=0;i<10;i++){
      _add(i.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => print(json.encode(boo)),
        child: Text('Save'),
      ),
      appBar: AppBar(
        title: Text('Add your pets'),
        actions: <Widget>[
        ],
      ),
      body: ListView(
        children: _myPets,
      ),
    );
  }
}

还有一件事，我创建了更多美化ToggleButtons，但是它将显示错误。
例如:

   children: <Widget>[
      Container(width: (MediaQuery.of(context).size.width - 49)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.whatshot,size: 16.0,color: Colors.red,),new SizedBox(width: 4.0,), new Text("滿意",style: TextStyle(color: Colors.red),)],)),
      Container(width: (MediaQuery.of(context).size.width - 49)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.invert_colors,size: 16.0,color: Colors.yellow[800],),new SizedBox(width: 4.0,), new Text("要翻執",style: TextStyle(color: Colors.yellow[800]))],)),
      Container(width: (MediaQuery.of(context).size.width - 49)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.ac_unit,size: 16.0,color: Colors.blue,),new SizedBox(width: 4.0,), new Text("翻執滿意",style: TextStyle(color: Colors.blue))],)),
    ],

谢谢!

最佳答案

您应该让切换按钮管理自己的状态。

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: TestArea(),
  ));
}

class TB extends StatefulWidget {
  final List<bool> value;
  final int keyValue;
  final String name;
  final Function onPressed;

  TB(this.value, this.keyValue, {this.name, this.onPressed});

  _TB createState() => _TB();
}

class _TB extends State<TB> {
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          leading: Text(widget.name ?? ""),
        ),
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          child: ToggleButtons(
            children: <Widget>[
              Icon(Icons.ac_unit),
              Icon(Icons.call),
              Icon(Icons.cake),
            ],
            onPressed: (index) {
              widget.onPressed(widget.keyValue, index);
              setState(() {});
            },
            isSelected: widget.value,
          ),
        )
      ],
    );
  }
}

class TestArea extends StatefulWidget {
  @override
  _TestArea createState() => _TestArea();
}

class _TestArea extends State<TestArea> {
  List<List<bool>> boo = [
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false],
    [true, false, false]
  ];
  var _myPets = List<Widget>();

  int _index = 0;

  void _add(String name) {
    _myPets.add(TB(boo[_index], _index, name: name, onPressed: _onPressed));

    ++_index;
  }

  void _onPressed(int key, int index) {
    boo[key][index] = !boo[key][index];
  }

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 10; i++) {
      _add(i.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => print(json.encode(boo)),
        child: Text('Save'),
      ),
      appBar: AppBar(
        title: Text('Add your pets'),
        actions: <Widget>[],
      ),
      body: ListView.builder(
        itemCount: _myPets.length,
        itemBuilder: (context, index) {
          return _myPets[index];
        },
      ),
    );
  }
}

关于flutter - 直到滚动到底部，屏幕才能实时更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/64493855/