Flutter 等效的 Android-Toggle-Switch答案

【问题标题】：Flutter equvalent Android-Toggle-SwitchFlutter 等效的 Android-Toggle-Switch
【发布时间】：2023-04-03 21:59:01
【问题描述】：

在android java中是否有类似this library的颤振小部件？

<belka.us.androidtoggleswitch.widgets.MultipleToggleSwitch
        android:id="@+id/multiple_toggle_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:textToggleCenter="Center"
        custom:textToggleLeft="Left"
        custom:textToggleRight="Right"
        android:layout_gravity="center"
        custom:toggleWidth="82dp"/>

我确实尝试在颤振上搜索找到这个实现，但我不能

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

作为一个选项，如何使用

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ToggleWidget(
                initialLabel: 2,
                activeBgColor: Colors.indigo,
                activeTextColor: Colors.white,
                inactiveBgColor: Colors.grey,
                inactiveTextColor: Colors.grey[900],
                labels: ['OR', 'XOR', 'AND', 'NOT'],
                onToggle: (index) {
                  print('switched to: $index');
                },
              ),
              SizedBox(height: 16),
              ToggleWidget(
                cornerRadius: 20,
                activeBgColor: Colors.redAccent,
                activeTextColor: Colors.yellow,
                inactiveBgColor: Colors.grey,
                inactiveTextColor: Colors.white,
                labels: ['YES', 'NO'],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以及小部件本身

typedef OnToggle = void Function(int index);

class ToggleWidget extends StatefulWidget {
  final Color activeBgColor;
  final Color activeTextColor;
  final Color inactiveBgColor;
  final Color inactiveTextColor;
  final List<String> labels;
  final double cornerRadius;
  final OnToggle onToggle;
  final int initialLabel;
  final double minWidth;

  ToggleWidget({
    Key key,
    @required this.activeBgColor,
    @required this.activeTextColor,
    @required this.inactiveBgColor,
    @required this.inactiveTextColor,
    @required this.labels,
    this.onToggle,
    this.cornerRadius = 8.0,
    this.initialLabel = 0,
    this.minWidth = 72,
  }) : super(key: key);

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

class _ToggleWidgetState extends State<ToggleWidget> {
  int current;

  @override
  void initState() {
    current = widget.initialLabel;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(widget.cornerRadius),
      child: Container(
        height: 40,
        color: widget.inactiveBgColor,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: List.generate(widget.labels.length * 2 - 1, (index) {
            final active = index ~/ 2 == current;
            final textColor = active ? widget.activeTextColor : widget.inactiveTextColor;
            final bgColor = active ? widget.activeBgColor : Colors.transparent;
            if (index % 2 == 1) {
              final activeDivider = active || index ~/ 2 == current - 1;
              return Container(
                width: 1,
                color: activeDivider ? widget.activeBgColor : Colors.white30,
                margin: EdgeInsets.symmetric(vertical: activeDivider ? 0 : 8),
              );
            } else {
              return GestureDetector(
                onTap: () => _handleOnTap(index ~/ 2),
                child: Container(
                  constraints: BoxConstraints(minWidth: widget.minWidth),
                  alignment: Alignment.center,
                  color: bgColor,
                  child: Text(widget.labels[index ~/ 2], style: TextStyle(color: textColor)),
                ),
              );
            }
          }),
        ),
      ),
    );
  }

  void _handleOnTap(int index) async {
    setState(() => current = index);
    if (widget.onToggle != null) {
      widget.onToggle(index);
    }
  }
}

结果：

【讨论】：

请在 github 上分享这个有用的库
如何将默认按钮设置为活动状态？
@DolDurma 查看Toggle Switch dart 包。

【解决方案2】：

ToggleSwitch dart 包（基于@Eugene 的回答）现已推出。

用法

dependencies:
  ...
  toggle_switch: "^0.1.4"

【讨论】：

【解决方案3】：

您可以选择创建自己的开关，下面的代码是一个快速演示，我知道它需要改进以匹配原始库样式：

 int selectedIndex = 0 ;

 Center(
        child: Container(
          padding: EdgeInsets.all(2.0),
          color: Colors.grey[300],
          child: Row(
            children: <Widget>[
              RaisedButton(
                child: Text('OR'),
                textColor: Colors.white,
                color: selectedIndex == 0 ? Colors.indigo : Colors.grey,
                onPressed: (){
                  setState(() {
                    selectedIndex = 0 ;
                  });
                },
              ),
              RaisedButton(
                child: Text('XOR'),
                textColor: Colors.white,
                color: selectedIndex == 1 ? Colors.indigo : Colors.grey,
                onPressed: (){
                  setState(() {
                    selectedIndex = 1 ;
                  });
                },
              ),
              RaisedButton(
                child: Text('AND'),
                textColor: Colors.white,
                color: selectedIndex == 2 ? Colors.indigo : Colors.grey,
                onPressed: (){
                  setState(() {
                    selectedIndex = 2 ;
                  });
                },
              ),
            ],
          ),
        ),
      ),

【讨论】：