Как передать данные в виджет без сохранения состояния во Flutter?

Question

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Title',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new MainBody(),
    );
  }
}


class MainBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: const EdgeInsets.only(left: 20.0, right: 20.0),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TimeCheck(),
          ],
        ),
      ),
    );
  }
}

TimeCheck это Stateful Widget. По сути, я хочу иметь возможность установить некоторые значения в начале, а затем передать их вTimeCheck, через MainBody. Все, что я читаю, показывает, как передавать данные вStateful Widgets, но можно ли передать его через Stateless Widget?

Я понимаю, что, возможно, использую неправильный подход, поэтому, если это поможет, в конечном итоге я бы хотел создать страницу "настроек", на которой пользователь может установить значения для данных (строку и некоторые числа) и затем эти значения передаются в TimeCheck где они используются для создания дисплея.

Я также хотел бы иметь возможность сохранять значения, установленные пользователем, если это возможно, чтобы им не приходилось вводить их каждый раз, а затем я хотел бы иметь возможность читать их, когда TimeCheck создается экземпляр.

Answer 1

Да, вы можете сделать это, просто передав информацию конструктору. Что-то вроде этого:

 class MyApp extends StatelessWidget {
  MyApp(this.yourData);

  final int yourData;
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Title',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new MainBody(yourData),
    );
  }
}


class MainBody extends StatelessWidget {
  MainBody(this.yourData);

  final int yourData;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: const EdgeInsets.only(left: 20.0, right: 20.0),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TimeCheck(yourData),
          ],
        ),
      ),
    );
  }
}

Answer 2

Для этого мы создаем файл. Мы называем это TodosScreen. Поскольку содержимое этой страницы не изменится во время выполнения, нам потребуется список задач в рамках этого виджета.

Мы переходим в нашу ListView.builder как тело виджета, к которому мы возвращаемся build(). Это отобразит список на экране, чтобы вы могли начать работу!

      class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  //requiring the list of todos
  TodosScreen({Key key, @required this.todos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      //passing in the ListView.builder
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index].title)
          );
        },
      ),
    );
  }
}

Создайте подробный экран для отображения информации о задании

Теперь создайте второй экран. Заголовок экрана содержит заголовок задачи, а в теле экрана отображается описание.

Поскольку подробный экран является нормальным StatelessWidget, потребовать, чтобы пользователь ввел Todo в пользовательский интерфейс. Затем создайте пользовательский интерфейс, используя данное задание.

      class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo.
  final Todo todo;

  // In the constructor, require a Todo.
  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

Переходить и передавать данные на подробный экран

Установив на место, вы готовы к навигации. В этом примере перейдите к DetailScreenкогда пользователь нажимает на задачу в списке. Передайте задачу на экран подробностей.

      ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[index].title),
      // When a user taps the ListTile, navigate to the DetailScreen.
      // Notice that you're not only creating a DetailScreen, you're
      // also passing the current todo to it.
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },
    );
  },
);

Для получения дополнительной информации см. Https://flutter.dev/docs/cookbook/navigation/passing-data.

Answer 3

Простое объяснение:

      class MainMenuCard extends StatelessWidget {
final Choice choice;
final int index;

const MainMenuCard({Key key, this.choice, this.index, Choice Choice, int int})
  : super(key: key);
 

И позвони так

      MainMenuCard(choice : choices[index],int: index)

там «Выбор» - это класс модели (когда мы используем с List.generate), иначе вы можете легко передать данные.

       final Choice choice;
 const List<Choice> choices = const <Choice>[]