為什么單選按鈕不改變顏色 onPressed - 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

為小部件BottomSheet創建新的statefulWidget ，添加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 與 StateSetter 參數一起使用

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;
                  });
                },
              ),
            ],
          );
        });
      },
    );
  }

這是帶有小部件列表的底頁