IconButton按下时位置变更：实现搜索栏旁置及按钮左移需求

可以通过状态管理结合Row布局来实现你要的效果，核心思路是用一个状态变量控制搜索栏的显示/隐藏，同时同步控制按钮的位置偏移，以下是具体实现代码：

import 'package:flutter/material.dart';

class SearchButtonBar extends StatefulWidget {
  const SearchButtonBar({super.key});

  @override
  State<SearchButtonBar> createState() => _SearchButtonBarState();
}

class _SearchButtonBarState extends State<SearchButtonBar> {
  bool _isSearching = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 可偏移的搜索按钮
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          margin: EdgeInsets.only(right: _isSearching ? 8 : 0),
          child: IconButton(
            icon: Icon(_isSearching ? Icons.close : Icons.search),
            onPressed: () {
              setState(() {
                _isSearching = !_isSearching;
              });
            },
          ),
        ),
        // 可显示/隐藏的搜索栏
        AnimatedOpacity(
          opacity: _isSearching ? 1 : 0,
          duration: const Duration(milliseconds: 300),
          child: _isSearching
              ? SizedBox(
                  width: 200,
                  child: TextField(
                    decoration: const InputDecoration(
                      hintText: "搜索...",
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                      ),
                    ),
                    autofocus: true,
                  ),
                )
              : const SizedBox.shrink(),
        ),
      ],
    );
  }
}

关键细节说明： #

• 状态控制：用_isSearching布尔值同步控制按钮样式、按钮偏移量和搜索栏的显示状态
• 平滑过渡：用AnimatedContainer实现按钮的左右偏移动画，AnimatedOpacity实现搜索栏的淡入淡出，提升交互体验
• 布局结构：用Row将按钮和搜索栏横向排列，确保搜索栏显示在按钮右侧
• 按钮偏移：通过AnimatedContainer的margin属性，在搜索状态下给按钮右侧添加间距，实现"向左移动"的视觉效果

如果需要更灵活的位置控制，也可以用Transform.translate替代AnimatedContainer的margin：

Transform.translate(
  offset: Offset(_isSearching ? -8 : 0, 0),
  child: IconButton(/* ... */),
)

内容的提问来源于stack exchange，提问作者Kutay balı