SwitchListTile 背景颜色

Question

我正在使用这个 lightTheme 和 darkTheme，我希望 SwitchListTile 具有相同的背景颜色（lightTheme 主题为白色 SwitchListTile 背景，darkTheme 为 RGB(27, 39, 55, 1.0) SwitchListTile 背景）

 lightTheme: ThemeData(
        primarySwatch: Colors.grey,
        primaryColor: Colors.white,
        brightness: Brightness.light,
        backgroundColor: const Color(0xFFE5E5E5),
        scaffoldBackgroundColor: Colors.white,
        accentColor: Colors.blueAccent,
        accentIconTheme: IconThemeData(color: Colors.white),
        dividerColor: Colors.white54,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.grey,
        primaryColor: Color.fromRGBO(27, 39, 55, 1.0),
        backgroundColor: const Color(0xFF212121),
        scaffoldBackgroundColor: Color.fromRGBO(27, 39, 55, 1.0),
        accentColor: Colors.blueAccent,
        accentIconTheme: IconThemeData(color: Colors.black),
        dividerColor: Colors.black12,
      ),

我正在使用 lutter_settings_screens 包

Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: SettingsGroup(
                      title: 'settings',
                      children: <Widget>[
                        SettingsContainer(
                          children: [
                            SwitchSettingsTile(
                              defaultValue: true,
                              settingKey: 'switch1',
                              title: 'switch1',
                              subtitle: 'switch1',
                              onChange: (value) {},
                            ),
                            SwitchSettingsTile(
                              defaultValue: true,
                              settingKey: 'switch2',
                              title: 'switch2',
                              subtitle: 'switch2',
                              onChange: (value) {},
                            ),
                          ],
                        ),
                      ],
                    ),
                  )

那么我在 ThemeData 或 SwitchListTile 中错过了哪些参数来实现这一目标？附截图

截图

Answer 1

这可能不是您想要的，坦率地说，我不知道哪个主题属性会更改

SwitchListTile

背景颜色，但更改主题属性值也可能会影响其他一些 UI 颜色，因此您可能只想更新SwitchListTile 颜色是这样的：

Ink(
  color: Colors.red,
  child: SwitchListTile(
    value: false,
    title: Text('Switch'),
    onChanged: (val) {},
  ),
)

Answer 2

据我所知，您可以采取3种方法：

1. 使用 ListTileTheme 类
2. 使用 ListTileThemeData 类
3. 使用您自己的自定义小部件。

无论哪种情况，您都将修改

tileColor

属性，该属性是属于 Tile 系列小部件的所有小部件（构建

ListTiles

的类，如

CheckboxListTile

、

RadioListTile

和

SwitchListTile

）所共有的属性).

1. ListTileTheme-类

一个继承的小部件，定义此小部件子树中 ListTiles 的颜色和样式参数。

此处指定的值用于未给出显式非空值的 ListTile 属性。

我没有这样实现，所以我不会描述这个方法。

后代小部件使用

ListTileTheme.of(context)

获取当前的 ListTileThemeData 对象

2. ListTileThemeData 类

提供您自己的课程：

class AppTheme {

  // CONSTRUCTOR
  AppTheme( /* your own parameters */);

  ThemeData getTheme() => ThemeData(
        ///* General
        useMaterial3: true,
        brightness: isDarkmode ? Brightness.dark : Brightness.light,

        /* You can add other customizations here */
        
        ///* ListTile
        listTileTheme: const ListTileThemeData(tileColor: Colors.blue),
      );
}

您将在

main.dart

:

添加此主题

class MainApp extends ConsumerWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    // Theme Provider, notice I'm using Riverpod for this part of the code
    final AppTheme appTheme = ref.watch(themeNotifierProvider);
    
    return MaterialApp.router(
      title: 'Guías Mineras Digitales',
      routerConfig: appRouter,
      debugShowCheckedModeBanner: false,
      theme: appTheme.getTheme(), // GET THE THEME FROM HERE!!!
    );
  }
}

3.自定义小部件

您可以制作一个自定义小部件，直接对

SwitchListTile

小部件实施更改。

import 'package:flutter/material.dart';

/// Flutter code sample for [SwitchListTile].

void main() => runApp(const SwitchListTileApp());

class SwitchListTileApp extends StatelessWidget {
  const SwitchListTileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('SwitchListTile Sample')),
        body: const Center(
          child: SwitchListTileExample(),
        ),
      ),
    );
  }
}

class SwitchListTileExample extends StatefulWidget {
  const SwitchListTileExample({super.key});

  @override
  State<SwitchListTileExample> createState() => _SwitchListTileExampleState();
}

class _SwitchListTileExampleState extends State<SwitchListTileExample> {
  bool _lights = false;

  @override
  Widget build(BuildContext context) {
    return SwitchListTile(
      title: const Text('Lights'),
      value: _lights,
      tileColor: Colors.red,
      onChanged: (bool value) {
        setState(() {
          _lights = value;
        });
      },
      secondary: const Icon(Icons.lightbulb_outline),
    );
  }
}

结果