Flutter -单选列表平铺未选择底部表格内的单选按钮

0qx6xfy6 于 2023-02-05 发布在 Flutter

关注(0)|答案(1)|浏览(182)

我正在使用flutter RadioListTile进行单选按钮选择，并在尝试检查时出现问题。即，未选择按钮，但检查后收到值。
有人能帮忙吗？
下面是示例代码，

var _selectedLanguageRadioIndex = 0;
 List<String> languageTitle  = ["English","हिंदी","ಕನ್ನಡ"];
 List<String> languageType  = ["en","hi","ka"];
    
    _languageOptions(){
      showModalBottomSheet(
          isScrollControlled: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
          ),
          context: context,
          builder: (context) {
            return StatefulBuilder(
              builder: (BuildContext context, StateSetter myState) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
                     
                    Flexible(
                        fit: FlexFit.loose,
                        child: ListView.separated(
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            return Container(
                                child:  RadioListTile(
                                value: index,
                                groupValue: _selectedLanguageRadioIndex,
                                selected: _selectedLanguageRadioIndex == index,
                                onChanged: (val) =>  {
                                  setState(() => _selectedLanguageRadioIndex = val as int),
                                },
                              title: ListTile(
                                title: Text(languageTitle[index]
                              ),
                              controlAffinity: ListTileControlAffinity.trailing,
                            ),
                            );
    
                          },
                      itemCount: languageTitle.length,
                      separatorBuilder: (context, index) => Divider(
                        thickness: 1,
                      ),
                      )
                    )
                  ],
                );
              },
            );
          }
      );
    }

flutter

来源：https://stackoverflow.com/questions/75306700/flutter-radio-list-tile-not-selecting-the-radio-button-inside-bottom-sheet

1条答案

按热度按时间

8oomwypt1#

由于您使用的是StatefulBuilder小部件，它会创建自己的State，在您的代码中是StateSetter myState。这意味着BottomSheet小部件的状态由myState关键字控制和更改。在BottomSheet小部件中，您调用setState，它会告诉dart更新与setState链接的小部件相关的UI，因此它不会更新UI。
在您的代码中，只需替换以下行：-

setState(() =>
 _selectedLanguageRadioIndex = val as int), //<-- Replace this line 

myState(() =>
_selectedLanguageRadioIndex = val as int), //<-- Replace it with this line

完整代码：-

var _selectedLanguageRadioIndex = 0; 
List<String> languageTitle = ["English", "हिंदी", "ಕನ್ನಡ"];
List<String> languageType = ["en", "hi", "ka"];

_languageOptions() {
showModalBottomSheet(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
  borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
),
context: context,
builder: (context) {
  return StatefulBuilder(
    builder: (BuildContext context, StateSetter myState) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              padding: const EdgeInsets.fromLTRB(15, 10, 0, 10),
              child: ListView.separated(
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return RadioListTile(
                    value: index,
                    groupValue: _selectedLanguageRadioIndex,
                    selected: _selectedLanguageRadioIndex == index,
                    onChanged: (val) => {
                  myState(() =>
                      _selectedLanguageRadioIndex = val as int),
                    },
                    title: ListTile(
                  title: Text(languageTitle[index]),
                    ),
                  );
                },
                itemCount: languageTitle.length,
                separatorBuilder: (context, index) => const Divider(
                  thickness: 1,
                ),
              ))
        ],
      );
    },
  );
});
}

赞(0）回复(0）举报 2023-02-05

我来回答

Flutter -单选列表平铺未选择底部表格内的单选按钮

1条答案

相关问题

热门标签

最新问答