需要将变量作为属性传递给可重用小部件

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 变量需要代替我手动输入的字符串（例如，Buy Plane门票，1 月 23 日等）同时传递小部件。 例如，cardHead 用作属性，我可以像这样在列表视图构建器中使用它：

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

有什么办法可以实现吗？

Answer 1

你可以用 widget.cardHead 替换文本字符串解决你的问题

Text(
    widget.cardHead,
  ),

Answer 2

我认为你不需要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]}',
)

Answer 3

请按上述方式修改您的 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]}'),
    );

需要将变量作为属性传递给可重用小部件

Need to pass variables as properties to reusable widget

flutter

flutter-widget