Flutter开关按钮开发：如何实现开关与文本同行及移除自定义开关内标签

1. 实现开关与文本同行布局 #

你当前用Column组件是垂直排列子元素，所以开关和文本会上下显示。要改成同行布局，只需要把包裹开关和文本的Column换成Row，同时可以通过crossAxisAlignment调整垂直对齐方式，用SizedBox控制两者的间距：

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

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool status = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 40),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center, // 水平居中，可根据需求调整
          crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中对齐
          children: [
            CustomSwitch(
              activeColor: Color(0xff771ae1),
              value: status,
              onChanged: (value) {
                setState(() {
                  status = value; // 必须更新status值，否则开关状态不会同步
                });
              },
            ),
            SizedBox(width: 12.0), // 开关和文本之间的间距
            Text(
              'Value : $status',
              style: TextStyle(
                color: Colors.black,
                fontSize: 20.0
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 移除CustomSwitch内部的标签 #

CustomSwitch默认会显示"ON"/"OFF"标签，只需在组件参数中设置activeText和inactiveText为空字符串即可移除：

CustomSwitch(
  activeColor: Color(0xff771ae1),
  value: status,
  activeText: "", // 移除激活状态的标签
  inactiveText: "", // 移除未激活状态的标签
  onChanged: (value) {
    setState(() {
      status = value;
    });
  },
),

额外提醒 #

你之前的onChanged回调里没有更新status的值，这样开关切换后状态不会同步，一定要加上status = value。另外可以根据需求调整Row的mainAxisAlignment（比如改成MainAxisAlignment.start实现靠左对齐），或者调整Padding的位置来改变整体布局。

内容的提问来源于stack exchange，提问作者Priya