Flutter：自定义搜索框

最新推荐文章于 2025-03-09 19:27:14 发布

青蛙不吃草～

最新推荐文章于 2025-03-09 19:27:14 发布

阅读量2k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/qq_18133317/article/details/108599515

版权

效果

在这里插入图片描述

实现方式

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:keduo/base/baseSize.dart';
import 'package:keduo/utils/icon_utils.dart';

class SearchBarWidget extends StatefulWidget {
   
  final ValueChanged<String> onchangeValue;
  final VoidCallback onEditingComplete;
  const SearchBarWidget({
   this.onchangeValue, this.onEditingComplete, Key key})
      : super(key: key);

  @override
  SearchBarWidgetState createState() => SearchBarWidgetState();
}

class SearchBarWidgetState extends State<SearchBarWidget> {
   
  ///编辑控制器
  TextEditingController _controller;

  ///是否显示删除按钮
  bool _hasDeleteIcon = false;

  @override
  void initState() {
   
    super.initState();
    _controller = TextEditingController();
  }

  Widget buildTextField() {
   
    //theme设置局部主题
    return TextField(
      controller: _controller,
      textInputAction: TextInputAction.search,
      keyboardType: TextInputType.text,
      maxLines