在 Flutter 中,如何将数据传递到 Stateless Widget 中?
In Flutter, how do I pass data into a Stateless Widget?
我正在尝试构建我的第一个 Flutter 应用程序,但 运行 在将数据传递到 Stateless Widgets 时遇到了困难。我有以下 类:
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
。基本上,我希望能够在开始时设置一些值,然后通过 MainBody
将它们传递给 TimeCheck
。我阅读的所有内容都显示了如何将数据传递到 Stateful Widgets
,但是是否可以通过 Stateless Widget
传递数据?
我知道我可能采取了错误的方法,所以如果它有帮助,我最终想做的是有一个 "settings" 页面,用户可以在其中设置数据值(a字符串和一些数字),然后将这些值传递给 TimeCheck
,用于生成显示。
如果可能的话,我还希望能够保存用户设置的值,这样他们就不必每次都输入它们,然后我希望能够在 TimeCheck
被实例化。
是的,您只需将信息传递给构造函数即可完成此操作。像这样:
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),
],
),
),
);
}
}
为此,我们创建了一个 StatelessWidget
。我们称之为 TodosScreen。由于此页面的内容在运行期间不会更改,因此我们必须要求此小部件范围内的待办事项列表。
我们将 ListView.builder
作为要返回的小部件的 body 传入 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)
);
},
),
);
}
}
创建一个详细屏幕来显示有关待办事项的信息
现在,创建第二个屏幕。屏幕的标题包含待办事项的标题,屏幕的 body 显示描述。
由于详细信息屏幕是正常的 StatelessWidget
,因此需要用户在 UI 中输入待办事项。然后,使用给定的待办事项构建 UI。
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
到位后,您就可以执行导航了。在此示例中,当用户点击列表中的待办事项时导航到 DetailScreen
。将待办事项传递给 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
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)
'Choice' 是模型 class(当我们与 List.generate 一起使用时)否则您可以轻松传递数据。
final Choice choice;
const List<Choice> choices = const <Choice>[]
我正在尝试构建我的第一个 Flutter 应用程序,但 运行 在将数据传递到 Stateless Widgets 时遇到了困难。我有以下 类:
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
。基本上,我希望能够在开始时设置一些值,然后通过 MainBody
将它们传递给 TimeCheck
。我阅读的所有内容都显示了如何将数据传递到 Stateful Widgets
,但是是否可以通过 Stateless Widget
传递数据?
我知道我可能采取了错误的方法,所以如果它有帮助,我最终想做的是有一个 "settings" 页面,用户可以在其中设置数据值(a字符串和一些数字),然后将这些值传递给 TimeCheck
,用于生成显示。
如果可能的话,我还希望能够保存用户设置的值,这样他们就不必每次都输入它们,然后我希望能够在 TimeCheck
被实例化。
是的,您只需将信息传递给构造函数即可完成此操作。像这样:
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),
],
),
),
);
}
}
为此,我们创建了一个 StatelessWidget
。我们称之为 TodosScreen。由于此页面的内容在运行期间不会更改,因此我们必须要求此小部件范围内的待办事项列表。
我们将 ListView.builder
作为要返回的小部件的 body 传入 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)
);
},
),
);
}
}
创建一个详细屏幕来显示有关待办事项的信息
现在,创建第二个屏幕。屏幕的标题包含待办事项的标题,屏幕的 body 显示描述。
由于详细信息屏幕是正常的 StatelessWidget
,因此需要用户在 UI 中输入待办事项。然后,使用给定的待办事项构建 UI。
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
到位后,您就可以执行导航了。在此示例中,当用户点击列表中的待办事项时导航到 DetailScreen
。将待办事项传递给 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
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)
'Choice' 是模型 class(当我们与 List.generate 一起使用时)否则您可以轻松传递数据。
final Choice choice;
const List<Choice> choices = const <Choice>[]