Flutter等效的Android切换开关

Question

Android Java中的this library这样的颤动小部件吗？

data-target="#multiCollapse{{d}}{{t}}{{k}}{{v}}"

我确实尝试搜索找到了实现，但是我做不到

Answer 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);
    }
  }
}

结果：

Answer 2

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

 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 ;
                  });
                },
              ),
            ],
          ),
        ),
      ),

Answer 3

ToggleSwitch dart软件包（基于@Eugene的答案）现已可用。

用法

dependencies:
  ...
  toggle_switch: "^0.1.4"