Question

我的屏幕是这样的。一切都是列表视图。所以我可以滚动我的屏幕。通常当我滚动时，一切都会上升，甚至是我的标题。我想要做的是，当我向下滚动时，我需要将“MY HEADER CONTAINER”始终保持在应用栏下方的顶部。

Answer 1

一个简单的解决方案是从列表视图中删除标题

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: [
            Image.network("https://picsum.photos/200"),
            Text("header"),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return Text("$index");
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 2

如果您想使用列表

 Scaffold(
  appBar: AppBar(title: Text("AppBar"),),
  body: Column(children:[
    Container(height: 150,child:Center(child: Text("Your header content"),)),
    Expanded(
      child: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
              trailing: Icon(Icons.check,color: Colors.green,),
              title: Text('$index'),
          );
        },
      ),
    ),
  ])
);

如果您想使用容器

    Scaffold(
  appBar: AppBar(title: Text("AppBar"),),
  body:Column(children:[
    Container(
        height: 100,
        child:Center(child: Text("Your header content"),)),
    Container(
      height: 500,
      child: SingleChildScrollView(
        child: Column(
          children: [
            Container(child: Image.network("https://picsum.photos/id/1/200/250")),
            Container(child: Image.network("https://picsum.photos/id/2/200/250")),
            Container(child: Image.network("https://picsum.photos/id/3/200/250"))
          ],
        ),
      ),
    ),
  ])
);

滚动时颤动将容器保持在顶部

2 个答案: