单击单选按钮时如何更改容器

debugcn 发表于 Dev

莱拉·马塔（Laila Mattar）

我有这样的布局：

我想在单击“选择时间”时将此蓝色容器更改为另一个容器

这是单选按钮的代码：

class TimeRadioButtonsClass extends StatefulWidget {
  @override
  _TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
  List<String> labels;
  String picked;
  Function function;
  TimeRadioButtonsClass({this.picked , this.labels , this.function});
}

class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
  @override
  Widget build(BuildContext context) {
    return RadioButtonGroup(
      orientation: GroupedButtonsOrientation.VERTICAL,
      margin: const EdgeInsets.only(left: 12.0),
      onSelected: (String selected) => setState((){
        widget.picked = selected;
      }),
      labels: widget.labels,
      picked: widget.picked,
      activeColor: Color(0xffFFD243),
      onChange: (String label, int index) {
          print("label: $label index: $index");
          widget.function(label,index);
      },
    );
  }
}

在这里，我称此类为CheckoutClass：

TimeRadioButtonsClass(picked: picked , labels: when),

注：我用setState在CheckoutClass受访问它作为参数在TimeRadioButtonsClass它只是一个时间变化的容器。

我不知道为什么setState不起作用！

编辑：我将函数作为参数传递给TimeRadioButtonsClass（我TimeRadioButtonsClass在上面的代码中进行编辑），这是用于调用的代码：

TimeRadioButtonsClass(picked: picked , labels: when , function: (String label , int index){
              setState(() {
                   if(index == 1){
                       indexRadio = 1;
                       print("indexRadio 1 : "+indexRadio.toString());
                   }
                   else{
                       indexRadio = 0;
                       print("indexRadio 2 : "+indexRadio.toString());
                   }
              });
       },),
       indexRadio == 1 ? Container(
           height: 50.0,
           color: Colors.blue,
         ):
        Container(
            height: 50.0,
            color: Colors.red,
         ),

穆库尔

如果你container是外面的class，那么你可以做一个callback选定button的radiobutton。

widget.onTap(selected);

为该onTap方法添加此行代码，以callback从其调用的位置添加到类。

class TimeRadioButtonsClass extends StatefulWidget {
  @override
  _TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
  List<String> labels;
  String picked;
  Function onTap;
  TimeRadioButtonsClass({this.picked, this.labels, this.onTap});
}

class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
  @override
  Widget build(BuildContext context) {
    return RadioButtonGroup(
      // orientation: GroupedButtonsOrientation.VERTICAL,
      margin: const EdgeInsets.only(left: 12.0),
      onSelected: (String selected) {
        setState(() {
          widget.picked = selected;
        });
        widget.onTap(selected);  //This will make a callback to your class and send the selected value in the onTap method of that class.
      },
      labels: widget.labels,
      picked: widget.picked,
      activeColor: Color(0xffFFD243),
      onChange: (String label, int index) =>
          print("label: $label index: $index"),
    );
  }
}

现在onTap要从中获取值class，请widget按以下方式致电

注意：这里的值1和2是您选择的单选按钮，string1是ASAP，2是Select计时器

TimeRadioButtonsClass(
        picked: "picked",
        onTap: (value) {
          if (value == 1) {
            //do change for one
            containerColor = Colors.blue;

              setState(() {

              });
          } else if (value == 2) {
            //do change for two
            containerColor = Colors.red;

              setState(() {

              });
          }
        },
      )

将容器的颜色定义为默认，以便在类的onTap方法上更改颜色

  Color containerColor = Colors.red;

现在显示container如下

Container(
      height: 100,
      width: 100,
      color: containerColor,
    );

编辑2 ：-（此代码更改了容器的颜色，单选按钮现在也每次更改）

  String picked = "ASAP"; // Add this line at the top

用此替换Code呼叫TimeRadioButtonsClass Class

    TimeRadioButtonsClass(
      picked: picked,
      labels: [
        "ASAP",
        "Select Timer",
      ],
      onTap: (
        int index,
      ) {
        indexRadio = index;
           if (index == 0) {
              picked = "ASAP";
            } else {
              picked = "Select Timer";
            }
        setState(() {});
      },
    ),
    indexRadio == 0
        ? Container(
            height: 50.0,
            color: Colors.blue,
          )
        : Container(
            height: 50.0,
            color: Colors.red,
          ),

并且TimeRadioButtonClass用这个代替自己code

导入'package：flutter / material.dart'; 导入'package：grouped_buttons / grouped_buttons.dart';

class TimeRadioButtonsClass extends StatefulWidget {
  @override
  _TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
  List<String> labels;
  String picked;
  Function(int) onTap;
  TimeRadioButtonsClass({this.picked, this.labels, this.onTap});
}

class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
  @override
  Widget build(BuildContext context) {
    return RadioButtonGroup(
        orientation: GroupedButtonsOrientation.VERTICAL,
        margin: const EdgeInsets.only(left: 12.0),
        labels: widget.labels,
        picked: widget.picked,
        activeColor: Colors.red,
        onChange: (String label, int index) {
          print(index);
          widget.onTap(index);
        });
  }
}

我所做的是删除了onSelected（可能以后使用），并将onTapfunction设置pass为int值

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。