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放在哪里，我想把任何孩子都放在里面，但要放在小部件树中。看到此自定义窗口小部件是一个框（带有特定的边框和填充物）。而且我希望能够随时将其添加到我的应用程序中，并在其内部说一个图像或一些文本（也许还有一行）。在不将新窗口小部件放到自定义窗口小部件中的情况下，该怎么做？

Answer 1

您可以通过使用pass your child widget动态地constructor。您可以这样：

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小部件包装在自定义小部件中

2 个答案: