user-interface - 为什么此FAB无法更新状态？

Question

我尽我所能回答这个问题:Adding new ListTile item on click

尽管它不一定具有可复制性，但我创建了可以编译但不能按预期运行的文件:

import 'package:flutter/material.dart';

void main() => runApp(SeedBank());

class SeedBank extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.lightGreen,
      ),
      home: Seeds(),
    );
  }
}

class Seeds extends StatefulWidget {
  @override
  SeedsState createState() => SeedsState();
}

class SeedsState extends State<Seeds> {
  var _seedSection = List<Widget>();

  Card seedSectionMethod(String title, String subtitle) {
    return new Card(
      child: ListTile(
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(subtitle),
          trailing: Icon(Icons.more_vert)),
    );
  }

  void initState() {
    super.initState();
    _seedSection.add(
      seedSectionMethod("Leek", "Bulgaarse Reuzen - Lincoln"),
    );
    _seedSection.add(
      seedSectionMethod("Kale", "Jardin mix"),
    );
    _seedSection.add(
      seedSectionMethod("Sunflower", "Helianthus Red"),
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Seed Bank'),
      ),
      body: ListView(
        children: this._seedSection,
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("+"),
        onPressed: () {
          setState(() {
            _seedSection.add(
              seedSectionMethod("New Seed", "With notes"),
            );
          });
        },
        backgroundColor: Colors.lightGreenAccent,
      ),
    );
  }
}

所需的行为是:

在应用启动时使用

，将填充带有种子的三个“卡片”。

按下

时，将添加一个新的“卡片”，其值分别为"new Seed"和"with notes"。

我希望我错过了一些有关设置状态的基本知识(仅从昨天开始)，但是我对下一步该去哪里了解更多。

V2:

使用@ andrea689，我可以编译，但是再次遇到相同的问题:

class SeedsState extends State<Seeds> {
  var _seedSection = List<Widget>();

  var _seeds = [
    ["Leek", "Bulgaarse Reuzen - Lincoln"],
    ["Kale", "Jardin mix"],
    ["Sunflower", "Helianthus Red"],
  ];

  Card seedSectionMethod(String title, String subtitle) {
    return new Card(
      child: ListTile(
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(subtitle),
          trailing: Icon(Icons.more_vert)),
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Seed Bank'),
      ),
      body:  ListView.builder(
        itemCount: _seedSection.length,
        itemBuilder: (context, index) {
          return seedSectionMethod(_seeds[index][0], _seeds[index][1]);
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("+"),
        onPressed: () {
          setState(() {
            _seeds.add(["New Seed", "With notes"]);
          });
        },
        backgroundColor: Colors.lightGreenAccent,
      ),
    );
  }
}

这是该类的样子吗？现在不再添加新项目。

最终解决方案

import 'package:flutter/material.dart';

void main() => runApp(SeedBank());

class SeedBank extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.lightGreen,
      ),
      home: Seeds(),
    );
  }
}

class Seeds extends StatefulWidget {
  @override
  SeedsState createState() => SeedsState();
}

class SeedsState extends State<Seeds> {
  var _seeds = [
    ["Leek", "Bulgaarse Reuzen - Lincoln"],
    ["Kale", "Jardin mix"],
    ["Sunflower", "Helianthus Red"],
  ];

  Card seedSectionMethod(String title, String subtitle) {
    return new Card(
      child: ListTile(
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(subtitle),
          trailing: Icon(Icons.more_vert)),
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Seed Bank'),
      ),
      body: ListView.builder(
        itemCount: _seeds.length,
        itemBuilder: (context, index) {
          return seedSectionMethod(_seeds[index][0], _seeds[index][1]);
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("+"),
        onPressed: () {
          setState(() {
            setState(() {
              _seeds.add(["New Seed", "With notes"]);
            });
          });
        },
        backgroundColor: Colors.lightGreenAccent,
      ),
    );
  }
}

Answer 1

由于_seedSection已修改，因此您必须使用ListView.builder

ListView.builder(
     itemCount: _seedSection.length,
     itemBuilder: (context, index) {
          return _seedSection[index];
     },
),

而且，最好只在状态中存储值，并将小部件放在 itemBuilder中。

var _seeds = [
    ["Leek", "Bulgaarse Reuzen - Lincoln"],
    ["Kale", "Jardin mix"],
    ["Sunflower", "Helianthus Red"],
  ];

ListView.builder(
     itemCount: _seeds.length,
     itemBuilder: (context, index) {
          return seedSectionMethod(_seeds[index][0], _seeds[index][1]);
     },
),

setState(() {
     _seeds.add(["New Seed", "With notes"]);
});