Виджет Flutter, заключенный в пользовательский виджет

У меня есть собственный виджет с именем 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, я хочу поместить внутрь любого дочернего элемента, но из дерева виджетов. Посмотрите, что этот настраиваемый виджет представляет собой коробку (с определенными границами и прочим). И я хочу иметь возможность вставлять это в свое приложение в любое время и помещать, скажем, изображение или какой-либо текст (возможно, также строку с дочерними элементами) внутри. Как мне это сделать, не помещая новый виджет внутрь этого настраиваемого виджета?


flutter android widget custom-widgets
person Tobias H.    schedule 23.08.2020    source источник
comment
Какую ошибку вы получаете, если добавляете дочерний элемент внутри пользовательского виджета   -  person Jitesh Mohite    schedule 23.08.2020

Ответы (2)


arrow_upward
0
arrow_downward 

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'));

or

CustomBox(childWidget: Row(children: <Widget>[...]));
person spycbanda    schedule 23.08.2020
comment
и по соглашению он должен называться child, а не childWidget - person pskink; 23.08.2020

arrow_upward
1
arrow_downward

Вы можете 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') выбранным вами виджетом.

person OMi Shah    schedule 23.08.2020