滚动助手

多个滚动控制器协同工作并定义要显示的行数

预览

Scroll Mate

入门

您可以处理多个滚动控制器同步。所有线条的滚动同时开始和结束。决定您想在屏幕上显示多少行。

属性

滚动助手模型

参数 类型 必需 默认值
items List<T> 是 –
builder ScrollMateItem 函数(T 标题, int 索引) 是 –
行数 整数 no 2
title Widget no SizedBox()
交叉轴对齐 CrossAxisAlignment no CrossAxisAlignment.start
交叉轴间距 双精度 no 10
主轴间距 双精度 no 20
scrollPadding EdgeInsets no EdgeInsets.zero

滚动助手项

参数 类型 必需 默认值
项 Widget 是 –
左边距 双精度 no 0
右边距 双精度 no 0

特点

  • 多个滚动控制器工作同步
  • 定义行数参数供用户显示
  • 可以使用泛型类型和自定义小部件显示

用法

ScrollMateList<String>(
      scrollMateModel: ScrollMateModel(
        lineCount: 4,
        items: Interests.list,
        title: buildInterestTitle(),
        builder: (String title, int index) {
          return ScrollMateItem(
            rightMargin: 20,
            leftMargin: 20,
            item: ScrollMateChip(title: title.toString(), index: index),
          );
        },
      ),
    );


const Padding(
      padding: EdgeInsets.only(bottom: 15, left: 20, top: 15),
      child: Text(
        'Interests',
        style: TextStyle(fontSize: 20, color: Color(0xff4c546d), fontWeight: FontWeight.bold),
      ),
    );


ScrollMateItem(
      rightMargin: 20,
      leftMargin: 20,
      item: Container(
        height: 40,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: const Color(0xff4c546d),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          title,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ).item;

GitHub

查看 Github