Flutter笔记：光影动画按钮、滚动图标卡片组等

Flutter笔记 scale_design更新：光影动画按钮、滚动图标卡片组

作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263
邮箱：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/134339302

1. 关于

之前发布过一个 scale_design 模块，主要提供的是一个基于 dp 尺寸的设计稿解决方案，记录在我的博客【scale_design - 设计师尺寸适配工具与常用组件库】，地址：https://jclee95.blog.csdn.net/article/details/134210226。我打算将一些常用的组件，对于少数常用的原生组件，如 Text、TextSpan、以及各种原生的Button，已经提供了对应的方案。

在 scale_design 的 example 示例项目中，展示了基于该模块初始化到使用这些组件完成的一些简单面和部分组件的展示，比如一个极简的登陆页面：

等等。

后续不断将我项目中所封装过的一些常用效果和组件添加进来。本文带来的是基于 dp 的三个组件：

循环滚动文字组件；
光影按钮组件；
图标按钮组组件

下面一一记录。

注意：不可单独使用这些组件，它们需要在项目开始时按照 scale_design 提供的方式进行初始化。具体可以参考 scale_design文档或内部的 example

2. 循环滚动文字组件 SlideText

循环滚动文字常用于封装一些需要展示多个文本的场景，算得上是基本组件中的基本组件。比如某宝首页的伪搜索框：

这其中的文本就是不断地滚动地。具体来说，有多个不同的小文本，前一个文本向上移除的同时、后一个文本向上移入中间位置。这可以使用 scale_design 库中新增的 SlideText 组件实现，比如：

SlideText(
  [
    '你有未读消息，请尽快处理1',
    '你有未读消息，请尽快处理2',
    '你有未读消息，请尽快处理3',
    '你有未读消息，请尽快处理4',
  ],
)

看起来效果是这样的：

其中，SlideText默认情况下是向上动画的，但是实际上是可以通过指定 isScrollUp 参数进行控制

3. 光影按钮组件 ShinyButton

这个组件完全是受启发于我之前写前端代码时使用过光影按钮的效果，但是前端是使用CSS实现的。于是我使用 Flutter 的动画复刻了一个类似的效果。

一个例子为：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: T(
          '光影按钮',
          fontSize: 18,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 当仅传递 onPressed 的时候
            ShinyButton(onPressed: () {}),

            const SizedBox(height: 30),

            // 如果没有任何参数则成为禁用状态
            ShinyButton(),

            const SizedBox(height: 30),

            // 你也可以自定义圆角、颜色、子元素等参数
            ShinyButton(
              borderRadius: 20,
              colors: const [
                Color.fromARGB(255, 112, 255, 117),
                Color.fromARGB(255, 0, 81, 3),
                Color.fromARGB(255, 112, 255, 117),
              ],
              child: T(
                '自定义一些属性',
                color: Colors.amber,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              onPressed: () {
                print('Button Pressed');
              },
            ),

            const SizedBox(height: 30),

            // 使用 disabled 属性禁用按钮
            ShinyButton(
              borderRadius: 20,
              width: 300,
              colors: const [
                Color.fromARGB(255, 112, 255, 117),
                Color.fromARGB(255, 0, 81, 3),
                Color.fromARGB(255, 112, 255, 117),
              ],
              disabled: true,
              onPressed: () {},
              child: T(
                '使用 disabled 属性禁用按钮',
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),

            const SizedBox(height: 30),

            // 一个登陆按钮的示例
            ShinyButton(
              borderRadius: 60,
              width: 310,
              colors: const [
                Color.fromARGB(255, 255, 224, 112),
                Color.fromARGB(255, 220, 77, 0),
                Color.fromARGB(255, 255, 224, 112),
              ],
              onPressed: () {},
              child: T(
                '登 陆',
                color: Colors.white,
                fontSize: 23,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

其效果如下：

4. 图标按钮组组件 ScrollableIconsCard

实际上，ScrollableIconsCard组件受启发于某宝首页的图标按钮组组件，例如：

// 定义一组图标与触碰图标时的回调，假设下main这些图标在你的项目中存在
List<Map<String, Object>> datas = [
  {'img': 'assets/svgs/捡漏.svg', 'title': '捡漏', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/摇现金.svg', 'title': '摇现金', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/聚补贴.svg', 'title': '聚补贴', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/领券中心.svg', 'title': '领券中心', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/肥鱼.svg', 'title': '肥鱼', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/金币.svg', 'title': '金币', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/工厂购.svg', 'title': '工厂购', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/小时达.svg', 'title': '小时达', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/全球购.svg', 'title': '全球购', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/全部频道.svg', 'title': '全部频道', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/活动日历.svg', 'title': '活动日历', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/减肥助手.svg', 'title': '减肥助手', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/购1001铺.svg','title': '购1001铺','onTap': () => print('捡漏')},
  {'img': 'assets/svgs/小美庭院.svg', 'title': '小美庭院', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/动物餐厅.svg', 'title': '动物餐厅', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/购票票.svg', 'title': '购票票', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/地狗好屋.svg', 'title': '地狗好屋', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/飞鸟旅行.svg', 'title': '飞鸟旅行', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/资质规则.svg', 'title': '资质规则', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/分类.svg', 'title': '分类', 'onTap': () => print('捡漏')},
];


ScrollableIconsCard(
  datas: datas,
),

你可以指定行数，这需要通过传入 amount 参数

ScrollableIconsCard(
    amount: 3,
    datas: datas,
),

其中构造函数：

  const ScrollableIconsCard({
    super.key,
    required this.datas,
    this.amount = 2, // 每一列的单元数量，默认为3
    this.spoutWidth = 80, // 滑槽宽度
    this.sliderWidth = 40, // 滑块宽度，默认为40
    this.sliderHeight = 7, // 滑槽和滑块的高度，默认为7
    this.spoutColor = const Color.fromARGB(255, 183, 183, 183),  // 滑槽的颜色
    this.sliderColor = const Color.fromARGB(255, 255, 134, 13), // 滑块的颜色
  });