如何在SlidableAction中改变图标颜色和标签颜色不同？

Question

我目前面临 Flutter 中 SlidableAction 的问题。当我设置前景色时，它会同时更改图标和文本的颜色。我的目标是通过允许图标和标签具有不同的颜色来自定义外观。这种差异化对于我的设计至关重要，因为它增强了视觉层次结构和整体用户体验。

我想知道是否有办法实现这一目标。具体来说，我正在寻找一种在同一个 SlidableAction 中独立设置图标颜色和标签颜色的方法。例如，我想将图标设置为一种颜色，例如红色，而标签可以是对比色，例如蓝色。

有没有办法在不影响 SlidableAction 的整个前景色的情况下完成此操作？如果有人有这方面的经验或者可以提供有关如何在 Flutter 中实现此功能的指导，我将非常感谢您的见解。任何有关如何有效自定义颜色的代码示例或建议都将非常有帮助

Answer 1

Flutter 的 SlidableAction 不允许您直接单独设置图标和标签的样式，但您可以通过在 SlidableAction 内创建自定义小部件来解决此问题。 不要使用默认的 SlidableAction，而是使用带有 CustomSlidableAction 的 Slidable，然后自定义子窗口小部件以显示不同样式的图标和文本。

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

class CustomSlidableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Slidable Action')),
      body: Slidable(
        key: const ValueKey(0),
        endActionPane: ActionPane(
          motion: const ScrollMotion(),
          children: [
            CustomSlidableAction(
              onPressed: (context) {
                // Action for the first button
              },
              backgroundColor: Colors.blue,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.archive, color: Colors.white), // Icon color
                  SizedBox(height: 4), // Spacing between icon and text
                  Text(
                    'Archive',
                    style: TextStyle(color: Colors.yellow), // Text color
                  ),
                ],
              ),
            ),
            CustomSlidableAction(
              onPressed: (context) {
                // Action for the second button
              },
              backgroundColor: Colors.red,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.delete, color: Colors.white), // Icon color
                  SizedBox(height: 4), // Spacing between icon and text
                  Text(
                    'Delete',
                    style: TextStyle(color: Colors.black), // Text color
                  ),
                ],
              ),
            ),
          ],
        ),
        child: ListTile(
          title: Text('Swipe me for actions!'),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: CustomSlidableExample()));
}