Нужно передать переменные как свойства в виджет многократного использования - PullRequest
Новая
       2

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

0 голосов
/ 24 января 2020

Это мой код для виджета карты. Это будет go как дочерний виджет 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, cardDes c, cardTime, cardDate переменные нужно go вместо строк, которые я набрал вручную (например, купить билеты на самолет, 23 января и т. д. c) при передаче виджета. Например, cardHead работает как свойство, которое я могу использовать в построителе списков просмотра вот так: 

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

Есть ли способ, которым я могу добиться этого?

Ответы [ 3 ]

1 голос
/ 24 января 2020

Я не думаю, что вам нужно 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]}',
)
0 голосов
/ 24 января 2020

Пожалуйста, измените ваш 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]}'),
    );
0 голосов
/ 24 января 2020

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

Text(
    widget.cardHead,
  ),
...