包裹在自定义小部件中的 Flutter 小部件

Question

我有一个名为 CustomBox:

的自定义小部件

class CustomBox extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 15, 15, 15),
      child: Container(
        margin: EdgeInsets.fromLTRB(30, 30, 30, 30),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(45),
        ),

        //custom child here

      ),
    );
  }
}

我放custom child here的地方，我想把任何child放在里面，但是从widget-tree开始。看到这个自定义小部件是一个盒子（带有特定的边框和东西）。而且我希望能够在任何时候将其添加到我的应用程序中，并在内部放置一个图像或一些文本（也可能是 children 的一行）。如果不将新小部件放入此自定义小部件，我该怎么做？

Answer 1

您可以通过使用 constructor 以动态方式 pass your child widget。你可以这样做：

class CustomBox extends StatelessWidget {
  final Widget childWidget;
  CustomBox(this.childWidget);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 15, 15, 15),
      child: Container(
          margin: EdgeInsets.fromLTRB(30, 30, 30, 30),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(45),
          ),
          //custom child here
          child: childWidget),
    );
  }
}

当你需要使用的时候，这样做：

CustomBox(Text('Text'))。只需将 Text('Text') 替换为您选择的小部件即可。

Answer 2

class CustomBox extends StatelessWidget {

  final Widget childWidget;
  CustomBox({this.childWidget});

  @override
  Widget build(BuildContext context) {

    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 15, 15, 15),
      child: Container(
        margin: EdgeInsets.fromLTRB(30, 30, 30, 30),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(45),
        ),

        child: this.childWidget,

      ),
    );
  }
}

通过

访问

CustomBox(childWidget: Text('Hello'));

或

CustomBox(childWidget: Row(children: <Widget>[...]));

包裹在自定义小部件中的 Flutter 小部件

Flutter widget wrapped inside custom widget

android

widget

custom-widgets

flutter