Oop 如何在类构造函数参数中动态传递小部件

这是我在Stackoverflow中的第一个问题。 当我们将它作为类构造函数参数传递时，我试图调用另一个StatefulWidget中的小部件

因此，我有一个自定义小部件：

class MyTextWidget extends StatelessWidget {

  final String text;

  MyTextWidget({ @required this.text });

  @override
  Widget build(BuildContext context) {
    return Text(this.text);
  }

}

我想在另一个类似这样的小部件中使用（带有传入类构造函数参数）

---

这是我的第一个代码：

class Example extends StatefulWidget {

  final Widget display;
  final String text;

  Example({ @required this.display, @required this.text });

  @override
  State<StatefulWidget> createState() {
    return ExampleState();
  }

}

class ExampleState extends State<Example> {

  @override
  Widget build(BuildContext context) {
      return this.widget.display(text: this.widget.text); // here we have error
  }

}

我意识到我需要为这个问题创建一个typedef，所以我改进了如下代码：

typedef Widget DisplayType({ @required String text });

class Example extends StatefulWidget {

  final DisplayType display;
  final String text;

  Example({ @required this.display, @required this.text });

  @override
  State<StatefulWidget> createState() {
    return ExampleState();
  }

}

class ExampleState extends State<Example> {

  @override
  Widget build(BuildContext context) {
      return this.widget.display(text: this.widget.text);
  }

}

最后我得到了这个错误：

The argument type 'Type' can't be assigned to the parameter type 'Widget Function({String text})'.dart(argument_type_not_assignable)

---

如何解决此问题？

您不需要将小部件向下传递，只需将其导入到要使用它的类中即可

当您想要实例化它时，需要使用括号

MyTextWidget（）

调用传递给有状态小部件的参数时，不需要使用

this

，只需使用

Widget.text

即可

---

你似乎对弗利特有些误解。在极少数情况下，您需要使用

this

我想您希望

display

成为一个返回

MyTextWidget

的构建器函数

import 'package:flutter/material.dart';

Future<void> main() async {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: Center(
        child: Example(
          display: ({@required final String text}) {
            assert(text != null);
            return MyTextWidget(text: text);
          },
          text: "some text",
        ),
      ),
    );
  }
}

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget({@required this.text}) : assert(text != null);

  @override
  Widget build(final BuildContext context) {
    return Text(this.text);
  }
}

typedef Widget DisplayType({@required final String text});

class Example extends StatefulWidget {
  final DisplayType display;
  final String text;

  Example({
    @required this.display,
    @required this.text,
  })  : assert(display != null),
        assert(text != null);

  @override
  State<StatefulWidget> createState() {
    return ExampleState();
  }
}

class ExampleState extends State<Example> {
  @override
  Widget build(final BuildContext context) {
    return this.widget.display(text: this.widget.text);
  }
}

导入“包装：颤振/材料.省道”；
Future main（）异步{
返回runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（最终构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据（原始样本：颜色。蓝色），
主页：MyHomePage（），
);
}
}
类MyHomePage扩展了无状态小部件{
@凌驾
小部件构建（最终构建上下文）{
返回脚手架(
appBar:appBar（标题：常量文本（“主”）），
正文：中(
孩子：例如(
显示：（{@required final String text}）{
断言（文本！=null）；
返回MyTextWidget（text:text）；
},
文本：“一些文本”，
),
),
);
}
}
类MyTextWidget扩展了无状态Widget{
最终字符串文本；
MyTextWidget（{@required this.text}）：断言（text！=null）；
@凌驾
小部件构建（最终构建上下文）{
返回文本（this.Text）；
}
}
typedef小部件DisplayType（{@required final String text}）；
类示例扩展StatefulWidget{
最终显示类型显示；
最终字符串文本；
范例({
@需要这个显示，
@需要此文本，
})：assert（显示！=null），
断言（文本！=null）；
@凌驾
状态createState（）{
返回ExampleState（）；
}
}
类ExampleState扩展了状态{
@凌驾
小部件构建（最终构建上下文）{
返回this.widget.display（文本：this.widget.text）；
}
}

您不需要向下传递小部件，只需在您想要使用它的类中导入它。关于“导入”：我知道我可以简单地导入我的小部件，但我想创建许多自定义小部件，并动态创建它，例如，如果用户是管理员或客户或某些条件。我可以像你说的那样修改代码，但我很好奇这有多不可能。关于“这个”：我用它来提高可读性。谢谢。“你很少需要用这个。”我总是写“这个”。这使代码更容易阅读。谢谢你，泰德，这正是我需要的。你认为这种方法会对性能产生负面影响吗？我不认为这种方法的性能会很差。

child: Example(display: MyTextWidget,text: this.widget.text);

The argument type 'Type' can't be assigned to the parameter type 'Widget Function({String text})'.dart(argument_type_not_assignable)

import 'package:flutter/material.dart';

Future<void> main() async {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(final BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: Center(
        child: Example(
          display: ({@required final String text}) {
            assert(text != null);
            return MyTextWidget(text: text);
          },
          text: "some text",
        ),
      ),
    );
  }
}

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget({@required this.text}) : assert(text != null);

  @override
  Widget build(final BuildContext context) {
    return Text(this.text);
  }
}

typedef Widget DisplayType({@required final String text});

class Example extends StatefulWidget {
  final DisplayType display;
  final String text;

  Example({
    @required this.display,
    @required this.text,
  })  : assert(display != null),
        assert(text != null);

  @override
  State<StatefulWidget> createState() {
    return ExampleState();
  }
}

class ExampleState extends State<Example> {
  @override
  Widget build(final BuildContext context) {
    return this.widget.display(text: this.widget.text);
  }
}