flutter - Flutter在滚动时隐藏搜索文本字段

Question

我想在IOS上创建类似whatsapp的效果。即当我开始向下滚动时，在用户列表[联系人]屏幕上，文本折叠栏和文本字段将出现。当我向上滚动时，文本将位于 Appbar 中间，搜索文本字段将消失。我正在使用 CustomScrollview 和 slivers 来实现这个效果。title of FlexibleSpaceBar当我在使用列小部件中添加文本字段时，我遇到了一个问题。文本“折叠栏”在应用栏上方向上移动，我不知道添加它的另一种方法我正在尝试下面的代码

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            floating: false,
            pinned: true,
            expandedHeight: 200,
            leading: Container(
              margin: EdgeInsets.only(
                left: 15,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  InkWell(
                    onTap: () {

                    },
                    child: Text(
                      'Edit',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            actions: <Widget>[
              Container(
                margin: EdgeInsets.only(
                  right: 0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {

                        }),
                  ],
                ),
              ),
            ],
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: false,
              title: Text(
                ' Collasping bar',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22.0,
                  fontWeight: FontWeight.bold,
                ),

              ),

            ),
          ),



          SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.teal[100 * (index % 9)],
                  child: Text('Grid Item $index'),
                );
              },
              childCount: 40,
            ),
          ),
        ],
      ),
    );
  }
}

标签： flutterflutter-layout