单选按钮文本在 Flutter 中向左对齐

Question

我想在 VS Code 中使用 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

一种更简单的方法是使用 RadioListTile 小部件并设置 controlAffinity = ListTileControlAffinity.trailing。这会将文本向左移动，单选按钮向右移动：

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

单选按钮文本在 Flutter 中向左对齐

Radio Button Text Alignment to left in Flutter

radio-button

flutter