如何访问和更改列表中特定小部件的属性值

Question

`List<Widget> _dataList = [
    DataCard(
      start: 0,
      end: 6,
    ),
    DataCard(
      start: 2,
      end: 8,
    ),
    DataCard(
      start: 4,
      end: 20,
    )
  ];`

dataCard 基本上返回一个带有Card 小部件的GestureDetector 小部件，它显示了开始和结束值。

我想要做的是在屏幕上显示小部件后更改开始/结束的值。如何访问列表中任何dataCard 的属性？

这是 DataCard 类：

class DataCard extends StatelessWidget {
  DataCard({this.start, this.end, this.key});
  final int start;
  final int end;
  final Key key;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print(key);
      },
      child: Card(
        key: key,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              Text(
                'Start: $start',
                style: TextStyle(
                  fontSize: 40,
                ),
              ),
              Text(
                'End: $end',
                style: TextStyle(
                  fontSize: 40,
                ),
              ),
            ],
          ),
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}

可视化：

---

例如，当我单击浮动操作按钮时，我只想更改第二个DataCard 小部件的开始和结束值。有没有办法做到这一点？谢谢！

最终目标是让用户能够将DataCard 添加到列表中，其中开始和结束值也由他们确定。之后，无需用户干预即可调整DataCard 的值。

Answer 1

您的问题与称为应用状态管理的大主题有关。

从有状态小部件、继承小部件、提供程序包和 BLoC 模式开始了解它。 （从最简单到最难）

这是flutter团队制作的关于有状态小部件https://youtu.be/AqCMFXEmf3w的视频。

回到您的问题，使用有状态小部件的简单示例：

class _MyHomePageState extends State<MyHomePage> {
  var list = <List<int>>[
    [1, 6],
    [2, 8],
    [4, 20]
  ];

  void _incrementSecondCardStartParametr() {
    setState(() {
      list[1][0] += 1;
    });
  }

  Function decrementEndParametr(idx) =>  () => setState((){
      list[idx][1] -= 1;
    });

  @override
  Widget build(BuildContext context) {
    List<Widget> _widgets = list
        .map((data) => DataCard(
              start: data[0],
              end: data[1],
              decrementEndParametr: decrementEndParametr(list.indexOf(data))
            ))
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text('List Example'),
      ),
      body: Center(
        child: Column(children: _widgets),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementSecondCardStartParametr,
        child: Icon(Icons.add),
      ),
    );
  }
}

    class DataCard extends StatelessWidget {
DataCard({this.start, this.end, this.key, this.decrementEndParametr});

final Function decrementEndParametr;
..
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: decrementEndParametr,
..