# SwipeCell  滑动单元格

## MillSwipeCell

![_MillSwipeCell_](../../images/slide.gif)

### 基础用法
```dart
MillSwipeCell(
  child: Container(
    height: 60,
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: 2,
          color: Color(0xfff1f1f1),
        ),
      ),
    ),
    child: Text('白日依山尽'),
  ),
  suffixs: [
    GestureDetector(
      onTap: () {
        print(123);
      },
      child: Container(
        alignment: Alignment.center,
        width: 100,
        height: 60,
        color: Colors.green,
        child: Text('closer', style: TextStyle(color: Colors.white)),
      ),
    ),
    Container(
      alignment: Alignment.center,
      width: 100,
      height: 60,
      color: Colors.red,
      child: Text('delete', style: TextStyle(color: Colors.white)),
    )
  ],
),
```

### 设置前后元素
prefixs: 可以设置前面的元素， suffixs：可以设置后面的元素。
```dart
MillSwipeCell(
  child: Container(
    height: 120,
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: 2,
          color: Color(0xfff1f1f1),
        ),
      ),
    ),
    child: Text(isCn ? '黄河入海流' : 'Bad days will pass'),
  ),
  prefixs: [
    Container(
      alignment: Alignment.center,
      width: 100,
      height: 120,
      color: Colors.green,
      child: Text('closer', style: TextStyle(color: Colors.white)),
    ),
    Container(
      alignment: Alignment.center,
      width: 100,
      height: 120,
      color: Colors.red,
      child: Text('delete', style: TextStyle(color: Colors.white)),
    )
  ],
  suffixs: [
    Container(
      alignment: Alignment.center,
      width: 100,
      height: 120,
      color: Colors.green,
      child: Text('closer', style: TextStyle(color: Colors.white)),
    ),
    Container(
      alignment: Alignment.center,
      width: 100,
      height: 120,
      color: Colors.red,
      child: Text('delete', style: TextStyle(color: Colors.white)),
    )
  ],
),
```

### Attributes
| 字段名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| child | 中间的主元素 | Widget |  |
| suffixs | 前面的按钮 | List\<Widget\> |  |
| prefixs | 后面的按钮 | List\<Widget\> |  |



## MillSwipeCard

![_MillSwipeCard_](../../images/card.gif)

### 基础用法
```dart
MillSwipeCard(
  key: ValueKey(index),
  child: Container(
    height: data['height'],
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: 2,
          color: Color(0xfff1f1f1),
        ),
      ),
    ),
    child: Text(isCn ? '白日依山尽$index' : ' No one and you'),
  ),
  suffixs: [
  	GestureDetector(
      onTap: () {
        print(123);
      },
      child: Container(
        alignment: Alignment.center,
        color: Colors.green,
        child: Text('closer',
                    style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
  prefixs: [
  	Container(
      alignment: Alignment.center,
      color: Colors.green,
      child: Text('closer',
                  style: TextStyle(color: Colors.white)),
    ),
  ]
);
```


### Attributes
| 字段名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| child | 中间的主元素 | Widget |  |
| suffixs | 后面的按钮 | List\<Widget\> |  |
| prefixs | 前面的按钮 | List\<Widget\> |  |
| preRatio | 前面按钮展示的宽度占中宽度的比例， 默认是 0.5 | double | 0.5 |
| sufRatio | 后面按钮展示的宽度占中宽度的比例， 默认是 0.5，理论上一个元素占 0.25 | double | 0.5 |


## _MillSwipeDrawer_

![_MillSwipeDrawer_](../../images/drawer.gif)

```dart
MillSwipeDrawer(
  key: ValueKey(index),
  child: Container(
    height: data['height'],
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: 2,
          color: Color(0xfff1f1f1),
        ),
      ),
    ),
    child: Text(isCn ? '白日依山尽$index' : ' No one and you'),
  ),
  suffixs: [
  	GestureDetector(
      onTap: () {
        print(123);
      },
      child: Container(
        alignment: Alignment.center,
        color: Colors.green,
        child: Text('closer',
                    style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
  prefixs: [
  	Container(
      alignment: Alignment.center,
      color: Colors.green,
      child: Text('closer',
                  style: TextStyle(color: Colors.white)),
    ),
  ]
);
```


### Attributes
| 字段名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| child | 中间的主元素 | Widget |  |
| suffixs | 后面的按钮 | List\<Widget\> |  |
| prefixs | 前面的按钮 | List\<Widget\> |  |
| preRatio | 前面按钮展示的宽度占中宽度的比例， 默认是 0.5 | double | 0.5 |
| sufRatio | 后面按钮展示的宽度占中宽度的比例， 默认是 0.5 | double | 0.5 |

