[英]Reusuable Stateless Widgets
I am creating reusable stateless widget for troubleshooting and maintenance.我正在为故障排除和维护创建可重用的无状态小部件。 MyApp1 is a statelesswidget and am calling this widget MyApp1(title: 'title',) from a statefull widget.In order to segregate many lines of code and make troubleshooting simpler, another widgets firstone and Secondone are created. MyApp1 是一个无状态小部件,我从一个有状态的小部件中调用这个小部件 MyApp1(title: 'title',)。为了分离多行代码并使故障排除更简单,创建了另一个小部件 firstone 和 Secondone。 Here am passing a title data.这里传递一个标题数据。 I made two widgets firstone (widget function) and SecondOne (Statelesswidget).我制作了两个小部件 firstone(小部件功能)和 SecondOne(Statelesswidget)。 Although I am showing a text in both, the outcome differs.尽管我在两者中都显示了文本,但结果却有所不同。
class MyApp1 extends StatelessWidget {
final String title;
const MyApp1({super.key,required this.title});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Text(title,style: Theme.of(context).textTheme.titleLarge),
firstone(context),
SecondOne(title: 'title'),
],
),
),
);
}
Widget firstone(context){
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
class SecondOne extends StatelessWidget {
final String title;
const SecondOne({Key? key,required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
Although the text styles are identical in both, my output is different.虽然文本 styles 两者都相同,但我的 output 是不同的。 I don't have to supply the title data twice when using firstone (the widget function).使用 firstone (小部件功能)时,我不必提供两次标题数据。 Which is preferable: Stateless widgets or widget functions?哪个更可取:无状态小部件或小部件功能? If I use a stateless widget, I transmit data from a stateful widget to Myapp1 stateless widget and then to a second widget.如果我使用无状态小部件,我会将数据从有状态小部件传输到 Myapp1 无状态小部件,然后再传输到第二个小部件。 Is this correct这个对吗
My Output:我的 Output:
Classes should be preferred over functions that return widgets.类应该优先于返回小部件的函数。
It's different because you're manually passing a BuildContext
which is provided above the scope of where the default ThemeData
can be accessed from (is provided by MaterialApp
).这是不同的,因为您手动传递了在 scope 上方提供的BuildContext
,可以从中访问默认ThemeData
(由MaterialApp
提供)。
class MyApp1 extends StatelessWidget {
final String title;
const MyApp1({super.key,required this.title});
@override
Widget build(BuildContext context) { // <- this BuildContext is being used
return MaterialApp( // <- this widget provides the `ThemeData`, which isn't accessible from the above context
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Text(title,style: Theme.of(context).textTheme.titleLarge), // <- refers to the `context` provided by build above
firstone(context), // <- refers to the `context` provided by build above
SecondOne(title: 'title'),
],
),
),
);
}
Widget firstone(context){
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
class SecondOne extends StatelessWidget {
final String title;
const SecondOne({Key? key,required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
// This uses the correct context, inherited from `MaterialApp` properly.
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
Please do not return MaterialApp
.请不要返回MaterialApp
。 Direct return column in myapp1 class. myapp1 class 中的直接返回列。 It will solve your issue它会解决你的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.