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放在custom child here ，我想把任何孩子放在里面，但是来自小部件树。 看到这个自定义小部件是一个盒子（带有特定的边框和东西）。 而且我希望能够随时将其添加到我的应用程序中，并在里面放置一个图像或一些文本（可能还有一排孩子）。 如果不将新小部件放入此自定义小部件中，我该怎么做？

Answer 1

您可以pass your child widget使用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>[...]));