为什么无线电按钮不更改颜色打开的颜色-Flutter？

Question

我的底部模态表中有2个自定义的无线电按钮。当我单击Onpressed方法时，它们不会立即更改颜色。关闭并再次打开模态菜单后，将正确设置颜色。

Widget customRadio(String text, int index){
    return OutlinedButton(
      onPressed: () {
        setState((){
          selected = index;
        });
      },
      child: Text(
        text, style: TextStyle(color: (selected == index) ?Colors.white: Colors.grey),
      ),
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        backgroundColor: (selected == index)?Colors.deepOrange: Colors.white,
      ),
    );
  }

Answer 1

创建新的statefulwidget widget bottomSheet ，add int selected = 0;移动到dialogStatefull

尝试此演示;

import 'package:flutter/material.dart';

class SaveScreen extends StatefulWidget {
  const SaveScreen({Key? key}) : super(key: key);

  @override
  State<SaveScreen> createState() => _SaveScreenState();
}

class _SaveScreenState extends State<SaveScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return DialogStatefull();
            },
          );
        },
      ),
    );
  }
}

class DialogStatefull extends StatefulWidget {
  const DialogStatefull({Key? key}) : super(key: key);

  @override
  State<DialogStatefull> createState() => _DialogStatefullState();
}

class _DialogStatefullState extends State<DialogStatefull> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(builder: (context, state) {
      return Container(
        height: 200,
        color: Colors.amber,
        child: Center(
          child: Column(
            children: [
              customRadio("helo", 0),
              customRadio("helo", 1),
              customRadio("helo", 2),
            ],
          ),
        ),
      );
    });
  }

  Widget customRadio(String text, int index) {
    return OutlinedButton(
      onPressed: () {
        setState(() {
          selected = index;
          print(index);
          print(selected);
        });
      },
      child: Text(
        text,
        style:
            TextStyle(color: (selected == index) ? Colors.white : Colors.grey),
      ),
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        backgroundColor: (selected == index) ? Colors.deepOrange : Colors.white,
      ),
    );
  }
}

Answer 2

如果您需要在同一屏幕上的底部表格，那么您需要使用statefulbuilder与statateSetter argumen一起使用

int selected = 0;
      Widget customRadio(
          {required String text, required int index, Function()? onTap,
       }) {
        return OutlinedButton(
          onPressed: onTap,
          style: OutlinedButton.styleFrom(
            primary: Colors.white,
            backgroundColor: (selected == index) ? Colors.deepOrange : Colors.white,
          ),
          child: Text(
            text,
            style:
                TextStyle(color: (selected == index) ? Colors.white : Colors.grey),
          ),
        );
      }

该函数，作为小部件中的参数，您需要更改UI，

  _showBottomSheet() {
    return showModalBottomSheet(
      context: context,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          return Column(
            children: [
              customRadio(
                text: 'button1',
                index: 1,
                onTap: () {
                  setState(() {
                    selected = 1;
                  });
                },
              ),
              customRadio(
                text: 'button2',
                index: 2,
                onTap: () {
                  setState(() {
                    selected = 2;
                  });
                },
              ),
            ],
          );
        });
      },
    );
  }

这是底部的底部发言