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

Question

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

dataCard 基本上是 returns 一个带有 Card 显示开始值和结束值的小部件的 GestureDetector 小部件。

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

这是数据卡class:

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 团队制作的关于 stateful widget 的视频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,
..