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

Posted 2023-02-23

【中文标题】Flutter 小部件包裹在自定义小部件中

【英文标题】：Flutter widget wrapped inside custom widget

【发布时间】：2020-12-12 01:41:33

【问题描述】：

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

【问题讨论】：

如果您在自定义小部件中添加子组件会出现什么错误

【参考方案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') 替换为您选择的小部件即可。

【参考方案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>[...]));

【讨论】：

按照惯例应该命名为child，而不是childWidget