Flutter Wrap & Chip

愛小麗0427發表於2019-06-05
Flutter

在寫業務的時候，難免有***搜尋***功能，一般搜尋功能的頁面如下：

Flutter Wrap & Chip

那如果在Android上面寫的話，

一般來講是一個 RecyclerView + 自動換行的 layoutManager + 自定義的background。

當然這個自動換行的LayoutManager 還得自己定義，去算座標。

那 Flutter 提供給我們很方便的控制元件 Wrap + Chip，用這兩個就能輕鬆實現上訴效果。

先來說一下Wrap。

Wrap

看名字我們也能看出來，它就是一個包裹住子佈局的 Widget，並且可以自動換行。

先看一下建構函式，來確定一下需要傳入什麼引數：

Wrap({
  Key key,
  this.direction = Axis.horizontal, // 子佈局排列方向
  this.alignment = WrapAlignment.start, // 子佈局對齊方向
  this.spacing = 0.0, // 間隔
  this.runAlignment = WrapAlignment.start, // run 可以理解為新的一行，新的一行的對齊方向
  this.runSpacing = 0.0, // 兩行的間距
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
複製程式碼

最基本的我們只需要傳入一個children即可，但是我們想要好的效果，一般都會傳入 spacing 和 runSpacing。

Chip

下面看一下 Chip，Chip可以理解為碎片的意思，還是先來看一下建構函式：

Chip({
    Key key,
    this.avatar,//左側Widget，一般為小圖示
    @required this.label,//標籤
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon//刪除圖示
    this.onDeleted//刪除回撥，為空時不顯示刪除圖示
    this.deleteIconColor//刪除圖示的顏色
    this.deleteButtonTooltipMessage//刪除按鈕的tip文字
    this.shape//形狀
    this.clipBehavior = Clip.none,
    this.backgroundColor//背景顏色
    this.padding, // padding
    this.materialTapTargetSize//刪除圖示material點選區域大小
  })
複製程式碼

可以看到這裡東西還是不少的，最基本的要傳入一個label。

label 一般就為我們的 text，先來看一下只定義一個 label 的效果：

Flutter Wrap & Chip

下面再加入 avatar：

Flutter Wrap & Chip

再來加入 delete：

Flutter Wrap & Chip

這裡注意，一定要設定上 onDeleted 引數，否則不顯示delete控制元件。

編寫 '歷史搜尋'

前面都是在 children 裡新增widget 來達到目的，不好做刪除工作。

現在我們來使用 ListView，並新增刪除事件。

程式碼如下：

import 'package:flutter/material.dart';

class WrapPage extends StatefulWidget {
  @override
  _WrapPageState createState() => _WrapPageState();
}

class _WrapPageState extends State<WrapPage> {

  // 生成歷史資料
  final List<String> _list = List<String>.generate(10, (i) => 'chip$i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('WrapPage'),
        ),
        body: Wrap(
            spacing: 10,
            runSpacing: 5,
            children: _list.map<Widget>((s) {
              return Chip(
                label: Text('$s'),
                avatar: Icon(Icons.person),
                deleteIcon: Icon(
                  Icons.close,
                  color: Colors.red,
                ),
                onDeleted: () {
                  setState(() {
                    _list.remove(s); // 刪除事件
                  });
                },
              );
            }).toList()
        ));
  }
}
複製程式碼

效果如下：

Flutter Wrap & Chip

總結

Flutter 提供給我們很多好用的 widget， 我們只需要組合起來就可以達到我們的目的。

完整程式碼已經傳至GitHub：github.com/wanglu1209/…

Flutter Wrap & Chip

相關文章