Почему этот FAB не обновляет состояние? - PullRequest
0 голосов
/ 29 марта 2020

Я следил как можно лучше за этот вопрос: Добавление нового элемента ListTile при клике

Хотя это не обязательно так воспроизводимо, как могло бы быть, я создал что-то, что компилируется , но не работает должным образом:

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".

Я ожидаю, что что-то пропустило, основа c во флаттере о состоянии установки ( только начал вчера), но я в курсе того, где go рядом, чтобы понять это больше.

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,
      ),
    );
  }
}

Ответы [ 3 ]

2 голосов
/ 29 марта 2020

Так как _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"]);
});
2 голосов
/ 29 марта 2020

попробуй вот так.

body: ListView.builder(
  itemCount: this._seedSection.length,
  itemBuilder: (context, index) => this._seedSection[index],
),

Вот рабочая демка. https://dartpad.dev/43a5b08327ed0f64fd084947873a3e52

1 голос
/ 29 марта 2020

Попробуйте добавить это:

body: ListView(
  children: this._seedSection.map((data) {
    return data;
  }).toList(),
),
...