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

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

1. 关于

之前发布过一个scale_design模块，首要供给的是一个根据 dp 尺寸的规划稿解决方案，记录在我的博客【scale_design – 规划师尺寸适配东西与常用组件库】，地址：jclee95.blog.csdn.net/article/det…。我打算将一些常用的组件，关于少量常用的原生组件，如 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), // 滑块的颜色
  });

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

目录