Flutter：如何将 RadioListTile 与 flutter cubit 一起使用？

Question

我无法让 RadioListTile 工作。单击时未选中和取消选中

你能帮帮我吗？

这是我的代码

编辑

...
  final ownedController =TextEditingController();
...
RadioListTile<
     String>(
        value:'not owned',
        groupValue:ownedController.text,
        toggleable:true,
        title: const Text('Owned'),
        onChanged:(String) {
             cubit.changeOwned(ownedController.text);
        }),
...

肘

...
  bool isOwned = false;

  String changeOwned(String owned) {
    isOwned = !isOwned;
    if (isOwned == true) {
      owned = 'owned';
    } else {
      owned = 'not owned';
    }
    return owned;
  }
...

Answer 1

你可以避免使用肘来切换状态。

...
final ownedController = TextEditingController();
bool isOwned = false;
String get ownedString => isOwned ? 'owned' : 'not owned';
...

    RadioListTile<String>(
      value: ownedString,
      groupValue: 'owned',
      toggleable: true,
      title: Text(ownedString),
      onChanged: (x) {
        setState(() {
          isOwned = !isOwned;
          ownedController.text = ownedString;
        });
      },
    ),
...

你必须将 toggleGroupe 修改为 'owned' 否则你会显示错误。

Answer 2

这里是一个基于enum的示例，以后添加更多对象更灵活、更容易。枚举值也可以转换为字符串并以可读形式表示您的用户界面。

只需复制并粘贴到 DartPad 即可使用：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => SomeCubit(),
      child: const MaterialApp(
        home: SomeView(),
      ),
    );
  }
}

class SomeView extends StatelessWidget {
  const SomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My App')),
      body: BlocBuilder<SomeCubit, SomeStatus>(
        builder: (context, state) {
          return Column(
            children: [
              for (var value in SomeStatus.values)
                RadioListTile<String>(
                  title: Text(value.titleByIndex), // <- Title by extension.
                  value: value.name,
                  groupValue: state.name,
                  toggleable: true,
                  selected: value.name.contains(state.name),
                  onChanged: context.read<SomeCubit>().onChanged,
                ),
            ],
          );
        },
      ),
    );
  }
}

enum SomeStatus { owned, notOwned }

class SomeCubit extends Cubit<SomeStatus> {
  SomeCubit() : super(SomeStatus.notOwned);

  void onChanged(String? name) {
    emit(SomeStatus.values.byName(name ?? state.name));
  }
}

extension SomeStatusEx on SomeStatus {
  // A useful function for converting value names to UI view.
  // List ordering must contain enum values.
  String get titleByIndex => ['Owned', 'Not Owned'].elementAt(index);
}

使用 Dart 2.17 及更高版本：

// Dart 2.17 can convert enum value to any value
// and you do not need to create an extension to put a nicer value name to the view.
enum SomeStatus {
  owned('Owned'),
  notOwned('Not Owned');

  const SomeStatus(this.label);

  // View in the user interface "title: Text(value.label)"
  final String label;
}

Flutter：如何将 RadioListTile 与 flutter cubit 一起使用？

Flutter: How can use RadioListTile with flutter cubit?

flutter

cubit

flutter-cubit