Flutter 实现左滑删除 TextField里面的内容

27 min read

Flutter 中可以通过 Dismissible 实现左滑删除，但是如果只是左滑删除文本框中的内容的话，可以通过在 TextField 上添加手势来实现。

具体实现步骤如下：

  1. 在 TextField 上添加 GestureDetector，并设置 onTapDown 回调函数。
GestureDetector(
  onTapDown: (TapDownDetails details) {
    clearTextField();
  },
  child: TextField(),
)
  1. 在 onTapDown 回调函数中调用 TextEditingController 的 clear 方法清空文本框中的内容。
void clearTextField() {
  _textEditingController.clear();
}

完整代码示例如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  final TextEditingController _textEditingController = TextEditingController();

  MyHomePage({required this.title});

  void clearTextField() {
    _textEditingController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: GestureDetector(
          onTapDown: (TapDownDetails details) {
            clearTextField();
          },
          child: TextField(
            controller: _textEditingController,
          ),
        ),
      ),
    );
  }
}