Необходимо передать переменные как свойства многоразовому виджету

Question

Это мой код для виджета карты. Это будет дочерним элементом виджета ListView.builder.

class CardHome extends StatefulWidget {
  String cardHead;
  String cardDesc;
  String cardTime;
  String cardDate;

  CardHome(
      {this.cardHead, this.cardDesc, this.cardTime, this.cardDate});

  @override
  _CardHomeState createState() => _CardHomeState();
}

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(globals.blockSizeHorizontal * 6,
          globals.blockSizeVertical * 3, globals.blockSizeHorizontal * 6, 0),
      width: globals.blockSizeHorizontal * 87,
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(SizeConfig.blockSizeHorizontal * 4.5)),
        color: Color(globals.secColor),
        elevation: 0,
        child: Container(
          padding: EdgeInsets.symmetric(
              vertical: globals.blockSizeVertical * 2.7,
              horizontal: globals.blockSizeHorizontal * 6.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: globals.blockSizeHorizontal * 56,
                    child: Text(
                      'Buy Plane Tickets',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                          height: globals.blockSizeVertical * 0.14,
                          fontFamily: 'Gilroy',
                          fontWeight: FontWeight.bold,
                          fontSize: globals.blockSizeHorizontal * 3.5,
                          letterSpacing: globals.blockSizeHorizontal * 0.1,
                          color: Color(0xff171b20)),
                    ),
                  ),
                  Text(
                    '8:20',
                    style: TextStyle(
                        fontFamily: 'Arboria',
                        fontWeight: FontWeight.w400,
                        fontSize: globals.blockSizeHorizontal * 3.8,
                        color: globals.inactHeadTextColor),
                  ),
                ],
              ),
              SizedBox(
                height: globals.blockSizeVertical * 2,
              ),
              Container(
                width: globals.blockSizeHorizontal * 70,
                child: Text(
                  'Buy Tickets for departure on 14th May, 2020 at 2:15pm',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(
                      fontFamily: 'Gilroy',
                      fontWeight: FontWeight.w600,
                      fontSize: globals.blockSizeHorizontal * 3.5,
                      letterSpacing: globals.blockSizeHorizontal * 0.02,
                      color: Color(0xff171b20)),
                ),
              ),
              SizedBox(height: globals.blockSizeVertical * 2),
              Text(
                '23 January',
                style: TextStyle(
                    fontFamily: 'Arboria',
                    fontWeight: FontWeight.w400,
                    fontSize: globals.blockSizeHorizontal * 3.3,
                    color: globals.inactHeadTextColor),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Мне нужно передать этот виджет в ListView.builder, поэтому переменные cardHead, cardDesc, cardTime, cardDate должны быть заменены строками, которые я ввел вручную (например, "Купить билеты на самолет", 23 января и т. Д.) При передаче виджета. Например, cardHead работает как свойство, которое я могу использовать в построителе списков следующим образом:

ListView.builder(
  itemCount: headers.length,
  itemBuilder: (context, index) {
    return CardHome(
      cardHead: Text('${headers.[index]}'),
      cardDesc: Text('${descriptions.[index]}'),
    );
  },
);

Есть ли способ добиться этого?

Answer 1

Пожалуйста, измените свой CardHome виджет, как указано выше.

class CardHome extends StatefulWidget {
  Widget cardHead;
  Widget cardDesc;
  Widget cardTime;
  Widget cardDate;

  CardHome(
      {this.cardHead, this.cardDesc, this.cardTime, this.cardDate});

  @override
  _CardHomeState createState() => _CardHomeState();
}

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(globals.blockSizeHorizontal * 6,
          globals.blockSizeVertical * 3, globals.blockSizeHorizontal * 6, 0),
      width: globals.blockSizeHorizontal * 87,
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius:
            BorderRadius.circular(SizeConfig.blockSizeHorizontal * 4.5)),
        color: Color(globals.secColor),
        elevation: 0,
        child: Container(
          padding: EdgeInsets.symmetric(
              vertical: globals.blockSizeVertical * 2.7,
              horizontal: globals.blockSizeHorizontal * 6.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: globals.blockSizeHorizontal * 56,
                    child: widget.cardHead
                  ),
                  widget.cardTime
                ],
              ),
              SizedBox(
                height: globals.blockSizeVertical * 2,
              ),
              Container(
                width: globals.blockSizeHorizontal * 70,
                child: widget.cardDesc
              ),
              SizedBox(height: globals.blockSizeVertical * 2),
              widget.cardDate
            ],
          ),
        ),
      ),
    );
  }
}

Как видите, мы обменялись

  String cardHead;
  String cardDesc;
  String cardTime;
  String cardDate;

С

  Widget cardHead;
  Widget cardDesc;
  Widget cardTime;
  Widget cardDate;

Итак, теперь вы можете использовать его как

CardHome(
      cardHead: Text('${headers.[index]}'),
      cardDesc: Text('${descriptions.[index]}'),
    );

Answer 2

Вы можете заменить строку текста на widget.cardHead решить вашу проблему

Text(
    widget.cardHead,
  ),

Answer 3

Я не думаю, что тебе нужен StatefulWidget Вот.

class CardHome extends StatelessWidget {
  final String cardHead;
  final String cardDesc;
  final String cardTime;
  final String cardDate;

  const CardHome({
    Key key,
    this.cardHead,
    this.cardDesc,
    this.cardTime,
    this.cardDate,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(
        globals.blockSizeHorizontal * 6,
        globals.blockSizeVertical * 3,
        globals.blockSizeHorizontal * 6,
        0,
      ),
      width: globals.blockSizeHorizontal * 87,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius:
              BorderRadius.circular(SizeConfig.blockSizeHorizontal * 4.5),
        ),
        color: Color(globals.secColor),
        elevation: 0,
        child: Container(
          padding: EdgeInsets.symmetric(
            vertical: globals.blockSizeVertical * 2.7,
            horizontal: globals.blockSizeHorizontal * 6.5,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: globals.blockSizeHorizontal * 56,
                    child: Text(
                      cardHead,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                        height: globals.blockSizeVertical * 0.14,
                        fontFamily: 'Gilroy',
                        fontWeight: FontWeight.bold,
                        fontSize: globals.blockSizeHorizontal * 3.5,
                        letterSpacing: globals.blockSizeHorizontal * 0.1,
                        color: Color(0xff171b20),
                      ),
                    ),
                  ),
                  Text(
                    cardTime,
                    style: TextStyle(
                      fontFamily: 'Arboria',
                      fontWeight: FontWeight.w400,
                      fontSize: globals.blockSizeHorizontal * 3.8,
                      color: globals.inactHeadTextColor,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: globals.blockSizeVertical * 2,
              ),
              Container(
                width: globals.blockSizeHorizontal * 70,
                child: Text(
                  cardDesc,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(
                    fontFamily: 'Gilroy',
                    fontWeight: FontWeight.w600,
                    fontSize: globals.blockSizeHorizontal * 3.5,
                    letterSpacing: globals.blockSizeHorizontal * 0.02,
                    color: Color(0xff171b20),
                  ),
                ),
              ),
              SizedBox(height: globals.blockSizeVertical * 2),
              Text(
                cardDate,
                style: TextStyle(
                  fontFamily: 'Arboria',
                  fontWeight: FontWeight.w400,
                  fontSize: globals.blockSizeHorizontal * 3.3,
                  color: globals.inactHeadTextColor,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Применение:

CardHome(
  cardHead: "Buy Plane Tickets",
  cardTime: "8:20",
  cardDesc: "Buy Tickets for departure on 14th May, 2020 at 2:15pm",
  cardDate: "23 January",
)

или

CardHome(
  cardHead: '${headers[index]}',
  cardTime: '${times[index}',
  cardDesc: '${descriptions[index]}',
  cardDate: '${dates[index]}',
)