广播按钮文本对齐左右颤动

Question

我想在VS代码中使用Flutter创建一个广播按钮。我已经完成了功能功能的广播按钮，但是我的项目的要求是将单个按钮文本与左侧对齐。但是我不能那样做。在这里，我附上了示例源代码。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: '',
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // The inital group value
  String _selectedGender = 'male';
  String text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          '',
        ),
      ),
      body: Padding(
          padding: const EdgeInsets.all(25),
          child: Container(
            margin: const EdgeInsets.all(4),
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(
                color: const Color(0xffffffff),
                border: Border.all(color: const Color(0xffbcbcbc))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ListTile(
                  leading: Radio(
                    fillColor: MaterialStateColor.resolveWith(
                        (states) => Color(0xfff29257)),
                    value: 'Male',
                    groupValue: _selectedGender,
                    onChanged: (value) {
                      setState(() {
                        _selectedGender = value!.toString();
                      });
                    },
                  ),
                  title: const Text('Male'),
                  textColor: Colors.grey,
                  focusColor: MaterialStateColor.resolveWith(
                      (states) => Color(0xfff29257)),
                ),
                ListTile(
                  leading: Radio(
                    fillColor: MaterialStateColor.resolveWith(
                        (states) => Color(0xfff29257)),
                    value: 'female',
                    groupValue: _selectedGender,
                    onChanged: (value) {
                      setState(() {
                        _selectedGender = value!.toString();
                      });
                    },
                  ),
                  title: const Text('Female'),
                  textColor: Colors.grey,
                  //fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
                  focusColor: MaterialStateColor.resolveWith(
                      (states) => Color(0xfff29257)),
                ),
                
              ],
            ),
          )),
    );
  }
}

有没有办法自定义这些无线电按钮？

Answer 1

对于左文本对齐，您可以使用放射性属性属性

controlAffinity: ListTileControlAffinity.trailing,

Answer 2

一种简单的方法是使用 radiolisttile ListTilecontrolaffinity.Trailing。这会将文本移至左侧，并将单个按钮移至右侧：

           RadioListTile(
              value: true,
              groupValue: groupVal,
              onChanged: (val) {},
              controlAffinity: ListTileControlAffinity.trailing,
            )