在颤动中覆盖小部件更改子小部件

Question

基本上我有两个看起来一样的按钮小部件，唯一的区别是一个有图标，另一个没有。

这是我的带图标的小部件类

class ButtonElevationWithIcon extends StatelessWidget {
  final String buttonText;
  final Function onPressedButton;
  final Icon buttonIcon;
  final double height;

  ButtonElevationWithIcon(
      {@required this.buttonIcon,
      @required this.buttonText,
      this.height = 60,
      @required this.onPressedButton});

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 40),
        decoration: ShapeDecoration(
          shape: StadiumBorder(
            side: BorderSide(width: 1.0),
          ),
          color: Colors.redAccent,
          shadows: <BoxShadow>[
            BoxShadow(
              color: Colors.redAccent.withOpacity(0.2),
              blurRadius: this.height / 5,
              offset: Offset(0, this.height / 10),
            ),
          ],
        ),
        child: TextButton.icon(
            label: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Stack(
                  children: <Widget>[
                    Text(
                      this.buttonText,
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.bold,
                        fontSize: Constants.kfontSizeButton,
                        letterSpacing: Constants.kletterSpacing,
                        color: Colors.yellowAccent,
                      ),
                    ),
                    Text(
                      this.buttonText,
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.bold,
                        fontSize: Constants.kfontSizeButton,
                        letterSpacing: Constants.kletterSpacing,
                        foreground: Paint()
                          ..style = PaintingStyle.stroke
                          ..strokeWidth = 1.5
                          ..color = Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            icon: this.buttonIcon,
            style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                backgroundColor:
                    MaterialStateProperty.all<Color>(Color(0xFFfa0002)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40.0),
                ))),
            onPressed: onPressedButton));
  }
}

这是没有它

class ButtonElevation extends StatelessWidget {
  final double height;

  final String buttonText;
  final Function onPressedButton;

  ButtonElevation(
      {@required this.buttonText,
      this.height = 100,
      @required this.onPressedButton});

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 40),
        height: this.height,
        decoration: ShapeDecoration(
          shape: StadiumBorder(
            side: BorderSide(width: 1.0),
          ),
          color: Colors.redAccent,
          shadows: <BoxShadow>[
            BoxShadow(
              color: Colors.redAccent.withOpacity(0.2),
              blurRadius: this.height / 5,
              offset: Offset(0, this.height / 10),
            ),
          ],
        ),
        child: TextButton(
            child: Center(
              child: Stack(
                children: <Widget>[
                  Text(

                    this.buttonText,
                    style: TextStyle(
                      fontFamily: 'Poppins',
                      fontWeight: FontWeight.bold,
                      fontSize: Constants.kfontSizeButton,
                      letterSpacing: Constants.kletterSpacing,
                      color: Colors.yellowAccent,
                    ),
                  ),
                  Text(
                    this.buttonText,
                    style: TextStyle(
                      fontFamily: 'Poppins',
                      fontWeight: FontWeight.bold,
                      fontSize: Constants.kfontSizeButton,
                      letterSpacing: Constants.kletterSpacing,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 1.5
                        ..color = Colors.black,
                    ),
                  ),
                ],
              ),
            ),
            style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                backgroundColor:
                    MaterialStateProperty.all<Color>(Color(0xFFfa0002)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40.0),
                ))),
            onPressed: onPressedButton));
  }
}

我认为应该有一种方法可以使代码不重复两次。我只想将孩子从 TextButton.icon 更改为 TextButton。

有什么想法吗？

Answer 1

尝试这样的事情：

class ButtonElevation extends StatelessWidget {
  final bool hasIcon;
  // Your other properties.

  ButtonElevation({
    this.hasIcon = true,
    // Your other properties.
  });

  @override
  Widget build(BuildContext context) {
    final child = RestOfYourWidget();
    return hasIcon ? TextButton.icon(label: child): TextButton(child: child);
  }
}

Answer 2

您可以创建一个单独的类，图标字段是可选的。然后，如果图标字段不为空，则使用 SELECT LTRIM(CONCAT(' ' + Prefix, ' ' + FirstName, ' ' + MiddleName, ' ' + LastName, ', ' + Suffix)), MAX(DATEDIFF(year, BirthDate, GETDATE())) FROM Customers WHERE BirthDate is not null GROUP BY Prefix, FirstName, MiddleName, LastName, Suffix ORDER BY MAX(DATEDIFF(year, e.BirthDate, GETDATE())) desc 否则使用 TextButton.icon。

考虑下面的代码

TextButton

我们可以将 class ButtonElevationWithIcon extends StatelessWidget { final String buttonText; final Function onPressedButton; final Icon buttonIcon; final double height; ButtonElevationWithIcon( {this.buttonIcon, @required this.buttonText, this.height = 60, @required this.onPressedButton}); Widget _label = Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Stack( children: <Widget>[ Text( this.buttonText, style: TextStyle( fontFamily: 'Poppins', fontWeight: FontWeight.bold, fontSize: Constants.kfontSizeButton, letterSpacing: Constants.kletterSpacing, color: Colors.yellowAccent, ), ), Text( this.buttonText, style: TextStyle( fontFamily: 'Poppins', fontWeight: FontWeight.bold, fontSize: Constants.kfontSizeButton, letterSpacing: Constants.kletterSpacing, foreground: Paint() ..style = PaintingStyle.stroke ..strokeWidth = 1.5 ..color = Colors.black, ), ), ], ), ), ); ButtonStyle = ButtonStyle( foregroundColor: MaterialStateProperty.all<Color>(Colors.white), backgroundColor: MaterialStateProperty.all<Color>(Color(0xFFfa0002)), shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder( borderRadius: BorderRadius.circular(40.0), ), ), ); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 40), decoration: ShapeDecoration( shape: StadiumBorder( side: BorderSide(width: 1.0), ), color: Colors.redAccent, shadows: <BoxShadow>[ BoxShadow( color: Colors.redAccent.withOpacity(0.2), blurRadius: this.height / 5, offset: Offset(0, this.height / 10), ), ], ), child: this.buttonIcon != null ? TextButton.icon( label: _label, icon: this.buttonIcon, style: _buttonStyle, onPressed: onPressedButton, ) : TextButton( label: _label, style: _buttonStyle, onPressed: onPressedButton, ), ); } } 和 label 保存到单独的变量中以避免重复。 检查 style 是否为空并使用 icon 或 TextButton.icon。