You need to enable JavaScript to run this app. Flutter中如何设置ToggleButton未被选中时执行对应操作?
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何设置ToggleButton未被选中时执行对应操作?

功能实现代码修改方案

基础修改版(兼容现有代码结构)

你可以直接在onPressed回调中,根据切换后的选中状态判断音量逻辑即可,修改后完整代码如下:

import 'package:flutter/material.dart';
// 如果你用audioplayers库控制音频,需要导入对应包
// import 'package:audioplayers/audioplayers.dart';

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

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

class _ToggleButtonExampleState extends State<ToggleButtonExample> {
  List<bool> _selections = List.generate(1, (index) => false);
  // 示例音频播放器实例,替换为你自己项目中的音频实例即可
  // final AudioPlayer audioPlayer = AudioPlayer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ToggleButtons(
          children: [
            // 动态切换图标,优化用户体验
            Icon(_selections[0] ? Icons.volume_off : Icons.volume_up),
          ],
          isSelected: _selections,
          onPressed: (int index) {
            setState(() {
              _selections[index] = !_selections[index];
              // 选中时静音(音量0),未选中时设为最大音量(1)
              final targetVolume = _selections[index] ? 0.0 : 1.0;
              // 替换为你项目中设置音量的方法即可
              // audioPlayer.setVolume(targetVolume);
            });
          },
        )
    );
  }
}

更简洁的优化方案

因为你只需要控制单个开关,不需要用List存储选中状态,直接用单个布尔变量即可,代码更易维护:

import 'package:flutter/material.dart';

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

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

class _ToggleButtonExampleState extends State<ToggleButtonExample> {
  bool _isMute = false;
  // 你的音频播放器实例
  // final AudioPlayer audioPlayer = AudioPlayer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ToggleButtons(
          children: [
            Icon(_isMute ? Icons.volume_off : Icons.volume_up),
          ],
          isSelected: [_isMute],
          onPressed: (int index) {
            setState(() {
              _isMute = !_isMute;
              // 直接根据_isMute设置音量
              // audioPlayer.setVolume(_isMute ? 0 : 1);
            });
          },
        )
    );
  }
}

注意事项

  • 上述代码中的音量设置逻辑已经预留了位置,你只需要把注释部分替换为你项目中实际控制背景音乐音量的方法即可
  • 音量的取值范围通常为0~1,1对应最大音量,0对应完全静音,符合你的需求

内容的提问来源于stack exchange,提问作者Cameron Johnson

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.10 02:39:02