如何在Flutter中实现底部UI（浮动操作）的iPhone Safari搜索栏？

Question

[在此输入图片描述](https://i.sstatic.net/tCkIRzOy.png)

我喜欢我的iPhone safari上的搜索栏在下面，当我滚动时，框会实时变大变小，所以当我向下滚动时它不会打扰我，但我找不到实现它的方法。我认为这是一个有吸引力的用户界面，我可以不断检查您在下面搜索的内容 我应该使用哪个小部件？我该如何实施？

我用SliverPercientHeaderDelegate来实现，配合SliverPercientHeader的浮动属性，无法实现不仅固定在顶部，还变大变小的盒子之类的逻辑。

Answer 1

所以我被你的好奇心逗乐了，甚至我尝试做你在想的事情并想出了这个：

import 'package:car/cd_widgets/cd_gap.dart';
import 'package:flutter/material.dart';

class BottomSliverAppBar extends StatefulWidget {
  @override
  _BottomSliverAppBarState createState() => _BottomSliverAppBarState();
}

class _BottomSliverAppBarState extends State<BottomSliverAppBar> {
  ScrollController _scrollController = ScrollController();
  TextEditingController searchController = TextEditingController();
  bool _isExpanded = true;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        _isExpanded = _scrollController.position.pixels <= 0;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: [
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
          ],
        ),
      ),
      bottomSheet: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOut,
        height: _isExpanded ? 150.0 : 40.0,
        decoration: BoxDecoration(
          color: Colors.grey[300],
          borderRadius: BorderRadius.circular(15.0),
        ),
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: _isExpanded
            ? SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                            children: [
                  Expanded(
                    child: TextField(
                      controller: searchController,
                      decoration: InputDecoration(
                        hintText: 'Search...',
                        hintStyle: TextStyle(fontSize: 16.0),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {},
                  ),
                            ],
                          ),
                  VerticalGap(space: 10.0,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(Icons.home),
                      Icon(Icons.wordpress),
                      Icon(Icons.flutter_dash),
                      Icon(Icons.dangerous),
                      Icon(Icons.close_fullscreen),
                    ],
                  )
                ],
              ),
            )
            : Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              searchController.text.isEmpty ? 'Search...' : searchController.text,
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
    );
  }
}

无需使用任何 Slivers、AnimatedContainer 小部件和scrollController 侦听器即可实现此目的

请检查并告诉我这是否是您真正想要的东西。

谢谢

附视频：实施视频链接

图片：