如何创建包装器小部件并将子项和属性传递给它

Question

我有两个布局相同的页面

在 React 中，我会创建一个包装器，导入它并传递子项，因此两个页面共享相同的包装器。

<Wrapper someproperty={1}>
  <div>content page 1</div>
</Wrapper>

<Wrapper someproperty={2}>
  <div>content page 2</div>
</Wrapper>

在 flutter 中有对应的吗？非常欢迎任何其他选项，例如共享 class 之类的，谢谢

Answer 1

当然可以。创建一个 Stateful-Widget 这是您的包装器。使用标志扩展此小部件，即 int-value。还用一个函数扩展这个 Wrapper 来切换标志并在这个函数中调用 setState() 。将此函数传递给 children，以便他们可以更改值。

包装器：

class ScrnWrapper extends StatefulWidget {
  @override
  _ScrnWrapperState createState() => _ScrnWrapperState();
}

class _ScrnWrapperState extends State<ScrnWrapper> {
int flag = 0;

  _switchFlag(int newValue){
     setState(() {
       flag = newValue;
     });
  }
  @override
  Widget build(BuildContext context) {

    return (flag == 0) ? ChildA(_switchFlag) : ChildB(_switchFlag);

  }
}

Child甲/乙

class ChildA extends StatelessWidget {
 
  final Function _switchFlag;

  WdgtAnwurfOverviewTeam(
    this._switchFlag,
  );
}

现在您可以从 child-Widget 调用 _switchFlag。状态正在更新，树正在用您想要的内容重建。

Answer 2

通常我使用 Class 元数据。

文档：https://api.flutter.dev/flutter/widgets/MetaData-class.html

用法示例：

class CustomText extends StatelessWidget {
  const CustomText({
    Key key,
    this.text,
  }) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    final WrapperWidget wrapperWidget = context.findAncestorWidgetOfExactType();
    return Text(
      "text ${wrapperWidget.metaData.toString()}" ??
          wrapperWidget.metaData.toString(),
    );
  }
}

class WrapperWidget extends MetaData {
  const WrapperWidget({
    Widget child,
    int someProperty,
  }) : super(
          child: child,
          metaData: someProperty,
        );
}


/// declaration
final component = WrapperWidget(
            child: CustomText(text: "content page"), someProperty: 1);

如何创建包装器小部件并将子项和属性传递给它

How to create a wrapper widget and pass children and properties to it in flutter

layout

flutter