Flutter技术咨询：点击搜索IconButton后显示下方TextField的实现

核心思路 #

通过State管理搜索框的显示状态，点击搜索按钮时切换状态，触发UI更新。

代码实现（替换标题为搜索框） #

这是最常见的实现方式，点击搜索按钮后将AppBar的标题替换为搜索输入框：

class YourScreen extends StatefulWidget {
  @override
  _YourScreenState createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  bool _isSearching = false;
  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xffffffff),
        centerTitle: !_isSearching,
        title: _isSearching
            ? TextField(
                controller: _searchController,
                style: TextStyle(color: Colors.black),
                decoration: InputDecoration(
                  hintText: '搜索...',
                  hintStyle: TextStyle(color: Colors.grey),
                  border: InputBorder.none,
                ),
                autofocus: true,
              )
            : Text(
                'CREW',
                style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
              ),
        elevation: 0.0,
        actions: [
          _isSearching
              ? IconButton(
                  icon: Icon(Icons.clear, color: Colors.black),
                  onPressed: () {
                    setState(() {
                      _isSearching = false;
                      _searchController.clear();
                    });
                  },
                )
              : IconButton(
                  icon: Icon(Icons.search, color: Colors.black),
                  onPressed: () {
                    setState(() {
                      _isSearching = true;
                    });
                  },
                ),
          IconButton(
            icon: Icon(Icons.notifications, color: Colors.black),
            onPressed: null,
          ),
        ],
      ),
      body: // 此处添加你的页面主体内容
    );
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

代码实现（在按钮下方悬浮显示搜索框） #

如果需要在搜索按钮的正下方弹出搜索框，可以用Stack+Positioned实现：

class YourScreen extends StatefulWidget {
  @override
  _YourScreenState createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  bool _isSearching = false;
  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xffffffff),
        centerTitle: true,
        title: Text(
          'CREW',
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
        ),
        elevation: 0.0,
        actions: [
          IconButton(
            icon: Icon(Icons.search, color: Colors.black),
            onPressed: () {
              setState(() {
                _isSearching = true;
              });
            },
          ),
          IconButton(
            icon: Icon(Icons.notifications, color: Colors.black),
            onPressed: null,
          ),
        ],
      ),
      body: Stack(
        children: [
          // 此处添加你的页面主体内容
          if (_isSearching)
            Positioned(
              top: kToolbarHeight,
              right: 16,
              left: 16,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 12),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.3), blurRadius: 4)],
                ),
                child: TextField(
                  controller: _searchController,
                  decoration: InputDecoration(
                    hintText: '搜索...',
                    border: InputBorder.none,
                    suffixIcon: IconButton(
                      icon: Icon(Icons.clear),
                      onPressed: () {
                        setState(() {
                          _isSearching = false;
                          _searchController.clear();
                        });
                      },
                    ),
                  ),
                  autofocus: true,
                ),
              ),
            ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

参考内容 #

可以查看Flutter官方文档中关于StatefulWidget状态管理、AppBar组件、TextField组件的说明，这些内容包含了组件的属性、生命周期和用法示例，能帮助你更灵活地调整实现细节。

内容的提问来源于stack exchange，提问作者김용석