Флаттер: изменение состояния тела от потрясающего

Question

У меня есть приложение, в котором я не могу добавить новый элемент в ListView, нажав FAB. Но я хочу, чтобы fab и body MetarialApp были в других классах. Я не хочу sma sh их в одном.

Я пытаюсь изменить количество дочерних элементов для ListView в виджете с состоянием, используя Уведомление. Но это не работает.

Как взаимодействовать с различными виджетами (например, добавить элемент в виджет ListView, нажав на fab)?

Каков наилучший подход? Я слышал о глобальных ключах, но я не понимаю, как их использовать.

main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var list = MyList();

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("My App")),
        body: list,
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              MyNotification(count: 1).dispatch(context);
            },
            child: Icon(Icons.add)),
      ),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class MyList extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => ListState();
}

class ListState extends State {
  int count = 3;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      onNotification: onCountPush,
      child: ListView.builder(
          itemCount: count,
          itemBuilder: (BuildContext context, int index) {
            return BodyCard();
          }),
    );
  }

  bool onCountPush(MyNotification notify) {
    setState(() {
      count += notify.count;
    });
    return true;
  }
}

class MyNotification extends Notification {
  final int count;

  const MyNotification({this.count});
}

Answer 1

body и FAB являются свойствами Scaffold. Поэтому, когда вы пытаетесь управлять состоянием body из FAB, он должен обрабатывать не body, а сам Scaffold. Посмотрите, Scaffold расширяется StatefulWidget, а с другой стороны, MyList расширяется StatelessWidget. Надеюсь, вы меня поняли.

main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyScaffold(),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class MyScaffold extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyScaffoldState();
}

class MyScaffoldState extends State {
  int count = 3;

  void changeCount() {
    setState(() {
      count = count == 3 ? 5 : 3;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("My App")),
      body: MyList(count),
      floatingActionButton: FloatingActionButton(
        onPressed: changeCount,
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyList extends StatelessWidget {
  final int count;

  const MyList(this.count);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: count,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          margin: const EdgeInsets.all(10),
          height: 30,
          color: Colors.red,
        );
      },
    );
  }
}

Примечание:

Позже, когда ваши состояния станут более сложными, вы не захотите использовать setState для управления Штаты. Как говорили другие, вы можете изучать BLo C, ChangeNotifier или все, что вам подходит.

Answer 2

Вы должны использовать Provider или BLo c в своем коде, чтобы вы могли сделать это