如何将自定义窗口小部件传递到另一个自定义窗口小部件中？

Question

我正在尝试将自定义的容器（具有背景色，标题和onPressed属性）传递到另一个自定义窗口小部件，该窗口小部件创建一行三个容器。目的是能够为第二个小部件中的每个按钮输入标题，例如TriButton（title1，title2，title3）。任何提示或技巧将不胜感激！

自定义容器

class RectButton extends StatelessWidget {
  RectButton({this.buttonChild, this.bgColor, this.onPress});

  final Widget buttonChild;
  final Color bgColor;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        constraints: BoxConstraints.expand(width: 100, height: 50),
        child: Center(child: buttonChild),
        decoration: BoxDecoration(
            color: bgColor,
            shape: BoxShape.rectangle,
            border: Border.all(width: 1, color: Colors.white)),
        padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
      ),
    );
  }
}

`Tri-button code`

enum Weight {
  ideal,
  actual,
  adjusted,
}

class TriButton extends StatefulWidget {
  TriButton({this.title1, this.title2, this.title3, this.buttonChild});

  final Text title1;
  final Text title2;
  final Text title3;
  final RectButton buttonChild;

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

class _TriButtonState extends State<TriButton> {
  Weight selectedWeight;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        constraints: BoxConstraints(maxWidth: 300),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: RectButton(
                buttonChild: GOAL TO ENTER TITLE HERE,
                onPress: () {
                  setState(() {
                    selectedWeight = Weight.adjusted;
                  });
                },
                bgColor: selectedWeight == Weight.adjusted
                    ? Colors.orange[600]
                    : Colors.grey[600],
              ),
            ),

Answer 1

使用StatefulWidget时，您需要在实现中使用“ widget.property”。

根据您的情况

 Expanded(
              child: RectButton(
                buttonChild: Text(widget.title1),
                onPress: () {
                  setState(() {
                    selectedWeight = Weight.adjusted;
                  });
                },
                bgColor: selectedWeight == Weight.adjusted
                    ? Colors.orange[600]
                    : Colors.grey[600],
              ),
            ),
 Expanded(
              child: RectButton(
                buttonChild: Text(widget.title2),
                onPress: () {
                  setState(() {
                    selectedWeight = Weight.adjusted;
                  });
                },
                bgColor: selectedWeight == Weight.adjusted
                    ? Colors.orange[600]
                    : Colors.grey[600],
              ),
            ),

.....