1

您好,我正在制作 sliverAppbar,其内容由animatedContainer 和Listview 组成。我想删除 sliverAppbar 下方的空间,以便可以完全看到动画容器。我怎样才能做到这一点?在 Scaffold Appbar 中,默认情况下可以实现这一点,因为默认值 extendBodyBehindAppBar = false 这是我的代码


class _TaskPageState extends State<TaskPage> {
  bool selected = true;

  final List<Task> tasks = <Task>[];
  final TextEditingController textEditingController = TextEditingController();
  double expandheight = 0;

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

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          
          return <Widget>[
            SliverAppBar(
              title: Text('NestedScrollView'),
              leading: GestureDetector(
                onTap: () {
                  setState(() {
                    selected = selected ? false : true;
                  });
                  print(selected);
                },
                child: Text('Tapme'),
              ),
              backgroundColor: Colors.white,
              flexibleSpace:  Placeholder(),
              floating: true,
              pinned: true,
              expandedHeight: 100,
            ),
          ];
        },

        body: Column(
          children: <Widget>[
            AnimatedContainer(width: 300,
              height: selected ? 200.0 : 0.0,
              alignment: selected
                  ? Alignment.bottomCenter
                  : AlignmentDirectional.topCenter,
              duration: Duration(milliseconds: 500),
              decoration: BoxDecoration(
                border: selected
                    ? Border.all(color: Colors.black, width: 3)
                    : Border.all(color: Colors.red, width: 3),
                gradient: new LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: selected
                      ? [Colors.lightGreen, Colors.redAccent]
                      : [Colors.orange, Colors.deepOrangeAccent],
                  stops: [0.0, 1.0],
                ),
                color: selected ? Colors.red : Colors.blue,
              ),
              curve: Curves.fastOutSlowIn,
              child: FlutterLogo(size: 200),
            ),
            Expanded(
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: tasks.length + 1,
                  itemBuilder: (BuildContext context, int index) {
                    if (index >= tasks.length) {
                      return Form(
                          child: TextField(
                            controller: textEditingController,
                            onEditingComplete: () {
                              tasks.add(Task(textEditingController.text));
                              setState(() {});
                            },
                          ));
                    }
                    return ListTile(
                      title: Text(tasks[index].name),
                    );
                  }),
            ),
          ],
        ));
  }
}

当我向下滚动页面时,我想实现这样的目标。 想要达到

但是由于在 sliverappbar 的空白区域下方,这是不可能的 不可能

4

0 回答 0