Flutter 如何在容器子容器中显示文本或图标按钮？

我有一个小部件，它想在应用程序的不同部分使用，但问题是有时子部件是文本，有时是图标按钮我应该如何更改子部件：在小部件的子部件上使用三元运算符

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final IconData icon;
  final String textof;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: IconButton(
        icon: Center(
          child: Icon(
            icon,
          ),
        ),
        onPressed: onpressed,
      ),
    );
  }
}

---

我相信您正在其他文件中使用此小部件。如果您希望有多个选项替代IconButton，请尝试以下代码：

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final Widget child;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: child,
    );
  }
}

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final IconData icon;
  final String textof;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: textof == null || textof == ''
        ? IconButton(
          icon: Center(
            child: Icon(
              icon,
           ),
         ),
         onPressed: onpressed,
       )
       : textof,
    );
  }
}

如果要使用图标按钮或文本，请尝试以下代码：

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final Widget child;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: child,
    );
  }
}

class MiddleBox extends StatelessWidget {
  final double widthBox;
  final double heightBox;
  final IconData icon;
  final String textof;
  final Function onpressed;

  const MiddleBox(
      {Key key,
      @required this.widthBox,
      @required this.heightBox,
      this.icon,
      this.textof,
      this.onpressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      width: widthBox,
      height: heightBox,
      child: textof == null || textof == ''
        ? IconButton(
          icon: Center(
            child: Icon(
              icon,
           ),
         ),
         onPressed: onpressed,
       )
       : textof,
    );
  }
}

---

我所做的是根据容器的宽度使用Iternary操作符。因为如果容器大于80，它会有文本，否则它会有图标。

你打算什么时候换孩子？谢谢你的回答。我个人使用容器的宽度作为条件。