Flutter-带有搜索栏的自定义条形应用栏

编程问答 2022-08-14

问题描述

我想要一个带有搜索栏的自定义条形appBar。我制作了一个普通的应用栏，看起来像这样：

enter image description here

，但是我希望当我们向下滚动时，应用栏看起来像这样：

enter image description here

实际上，普通应用栏的代码只是AppBar的绿色elevation: 0，在下面添加了Header()。这是我的标头代码：

class Header extends StatefulWidget {
  String title;
  IconData icon;

  Header({@required this.title,@required this.icon});

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

class _HeaderState extends State<Header> {
  TextEditingController _editingController;


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

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return PreferredSize(
      preferredSize: size,child: Container(
        margin: EdgeInsets.only(bottom: kDefaultPadding * 2.5),height: size.height*0.2,child: Stack(
          children: [
            Container(
              height: size.height*0.2-27,width: size.width,decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(36),bottomRight: Radius.circular(36),)
              ),child: Align(
                  alignment: Alignment.topCenter,child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,children: [
                      Text(widget.title,style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white,fontWeight: FontWeight.bold)),SizedBox(width: 20,),Icon(widget.icon,size: 40,color: Colors.white,)
                    ],)),Positioned(
              bottom: 0,left: 0,right: 0,child: Container(
                alignment: Alignment.center,margin: EdgeInsets.symmetric(horizontal: kDefaultPadding),padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),height: 54,decoration: BoxDecoration(
                    color: Colors.white,borderRadius: BorderRadius.circular(20),boxShadow: [BoxShadow(
                      offset: Offset(0,10),blurRadius: 50,color: Theme.of(context).primaryColor.withOpacity(0.23),)]
                ),child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _editingController,textAlignVertical: TextAlignVertical.center,onChanged: (_) => setState(() {}),decoration: InputDecoration(
                            hintText: 'Search',hintStyle: TextStyle(color: Theme.of(context).primaryColor.withOpacity(0.5)),enabledBorder: InputBorder.none,focusedBorder: InputBorder.none,_editingController.text.trim().isEmpty ? IconButton(
                        icon: Icon(Icons.search,color: Theme.of(context).primaryColor.withOpacity(0.5)),onPressed: null) :
                    IconButton(
                        highlightColor: Colors.transparent,splashColor: Colors.transparent,icon: Icon(Icons.clear,onPressed: () => setState(() {
                          _editingController.clear();
                        })),],)
          ],);
  }

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

欢迎提供任何帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

appbardartflutter-sliveriosios