Flutter列表项开关插件list_tile_switch的使用

描述

ListTileSwitch 是一个简单的Flutter小部件，它将 ListTile 与开关（Switch）组合在一起。此插件提供了三种类型的开关组件：

1. Material Switch：来自Flutter SDK中Material库的标准开关。
2. CupertinoSwitch：来自Flutter SDK中Cupertino库的iOS风格开关。
3. 自定义开关：允许开发者创建自己设计的开关。

该插件已经在Android和Web上进行了测试，理论上也应该可以在iOS设备上正常工作，因为它只包含纯Dart和Flutter组件。

安装

在你的pubspec.yaml文件中添加依赖：

dependencies:
    list_tile_switch: ^latest_version # 替换为最新版本号

然后运行flutter pub get来安装依赖。

使用方法

ListTileSwitch可以像普通的ListTile一样使用，并且额外提供了一个作为尾部组件的开关。以下是主要参数及其含义：

其余参数如leading、title等均直接映射到内部的ListTile小部件属性。

示例代码

以下是一个完整的例子，展示了如何使用ListTileSwitch来创建带有不同样式开关的列表项：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListTileSwitch Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ListTileSwitchExample(title: 'ListTileSwitch Demo'),
    );
  }
}

class ListTileSwitchExample extends StatefulWidget {
  ListTileSwitchExample({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _ListTileSwitchExampleState extends State<ListTileSwitchExample> {
  List<bool> _switchValues = List.generate(7, (_) => false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 20),
            Text(
              'ListTileSwitch with only title',
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
            ),
            SizedBox(height: 20),
            // 默认自定义开关
            ListTileSwitch(
              value: _switchValues[0],
              leading: Icon(Icons.access_alarms),
              onChanged: (value) {
                setState(() {
                  _switchValues[0] = value;
                });
              },
              switchActiveColor: Colors.indigo,
              title: Text('Default Custom Switch'),
            ),
            // Cupertino 风格开关
            ListTileSwitch(
              value: _switchValues[1],
              leading: Icon(Icons.message),
              onChanged: (value) {
                setState(() {
                  _switchValues[1] = value;
                });
              },
              switchActiveColor: Colors.teal,
              switchScale: 0.8,
              switchType: SwitchType.cupertino,
              title: Text('Cupertino Switch'),
            ),
            // Material 风格开关
            ListTileSwitch(
              value: _switchValues[2],
              leading: Icon(Icons.build),
              onChanged: (value) {
                setState(() {
                  _switchValues[2] = value;
                });
              },
              switchActiveColor: Colors.deepOrange,
              switchType: SwitchType.material,
              title: Text('Material Switch'),
            ),
            SizedBox(height: 20),
            Text(
              'ListTileSwitch with subtitle',
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
            ),
            SizedBox(height: 20),
            // 带有副标题的自定义开关
            ListTileSwitch(
              value: _switchValues[3],
              toggleSelectedOnValueChange: true,
              leading: Icon(Icons.access_alarms),
              onChanged: (value) {
                setState(() {
                  _switchValues[3] = value;
                });
              },
              subtitle: Text('This tile is using custom switch and subtitle.'),
              switchActiveColor: Colors.blueGrey,
              title: Text('Custom Switch'),
            ),
            // 更多带副标题的例子...
            SizedBox(height: 10),
            ListTileSwitch(
              value: _switchValues[4],
              leading: Icon(Icons.message),
              onChanged: (value) {
                setState(() {
                  _switchValues[4] = value;
                });
              },
              switchActiveColor: Colors.teal,
              switchScale: 0.8,
              subtitle: Text('This tile is using cupertino switch and subtitle.'),
              switchType: SwitchType.cupertino,
              title: Text('Cupertino Switch'),
            ),
            SizedBox(height: 10),
            ListTileSwitch(
              value: _switchValues[5],
              onChanged: (value) {
                setState(() {
                  _switchValues[5] = value;
                });
              },
              toggleSelectedOnValueChange: true,
              subtitle: Text('This tile is using material switch and subtitle.'),
              switchActiveColor: Colors.deepOrange,
              switchType: SwitchType.material,
              title: Text('Material Switch'),
            ),
            SizedBox(height: 20),
            Text(
              'ListTileSwitch with no title',
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
            ),
            SizedBox(height: 20),
            ListTileSwitch(
              value: _switchValues[6],
              onChanged: (value) {
                setState(() {
                  _switchValues[6] = value;
                });
              },
              toggleSelectedOnValueChange: true,
              subtitle: Text('This tile is using material switch with only subtitle.'),
              switchActiveColor: Colors.deepOrange,
              switchType: SwitchType.material,
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

这段代码创建了一个应用，其中包含了多个不同配置的ListTileSwitch实例，演示了如何根据需要定制这些开关元素。