Flutter - 处理手势

AnRFDev

发布于 2021-02-01 15:18:48

1.3K0

发布于 2021-02-01 15:18:48

文章被收录于专栏：AnRFDevAnRFDev

Flutter - 处理手势

点击，滑动等等手势。

处理点击

步骤

创建自定义button类
在其中使用GestureDetector并复写onTap回调

代码实现

import 'package:flutter/material.dart';

/// 自定义button
class ButtonSample1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final snackBar = SnackBar(content: Text("Now you tap the $this"),);
        Scaffold.of(context).showSnackBar(snackBar);
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        margin: EdgeInsets.all(12.0),
        decoration: BoxDecoration(color: Theme
            .of(context)
            .buttonColor,
            borderRadius: BorderRadius.circular(8.0)),
        child: Text("$this"),),
    );
  }

}

参考： https://flutter.io/cookbook/gestures/handling-taps/

带波纹效果的按钮

使用InkWell。

/// 带有波纹效果的按钮
class ButtonSample2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        final snackBar = SnackBar(content: Text("Now you tap the $this"),);
        Scaffold.of(context).showSnackBar(snackBar);
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Text("$this"),
      ),
    );
  }
}

Flutter提供的按钮控件还有RaisedButton和FlatButton。

列表侧滑删除

步骤：

创建一个列表
用Dismissible包装每一个item
提供删除时的UI显示

创建列表

final items = List<String>.generate(10, (i) => "Item $i");

创建字符串列表。这个列表不能放在build中，要定义为State的全局变量。否则删除item时，无法从view tree中移除item，从而报错。

删除时的UI

设置Dismissible的background，可以在删除时显示。

示例界面代码

import 'package:flutter/material.dart';

/// 侧滑删除列表界面
class SwipeToDismissPage extends StatefulWidget {
  SwipeToDismissPage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return SwipeState();
  }
}

class SwipeState extends State<SwipeToDismissPage> {
  final items = List<String>.generate(10, (i) => "Item $i"); // 列表必须放在外面定义

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Swipe to dismiss",
        ),
      ),
      body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                  print(direction);
                });
                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text('remove $item')));
              },
              child: ListTile(
                title: Text('$item'),
              ),
              background: Container(
                color: Colors.red,
              ),
            );
          }),
    );
  }
}