时间戳

首页 > 解决方案 > 如何将 PageView 与 Stack 一起使用？

flutter - 如何将 PageView 与 Stack 一起使用？

问题描述

我是 Flutter 的新手，我喜欢 PageView 小部件，但我如何始终在顶部放置 AppBar 或其他元素？现在PageView正在改变整个页面，连同AppBar，你怎么能pin呢？使页面在 AppBar 下滚动

Scaffold(
  body: Stack(
    children: [
      Padding(
        padding: EdgeInsets.only(top: 50),
        child: Container(
          width: double.infinity,
          height: 100,
          color: Colors.blue,
        ),
      ),
      FutureBuilder(
          future: _futureMenu,
          builder: (context, snapshot){
            if(snapshot.hasData){
              return PageView.builder(
                itemBuilder: (context, position) {
                  return PageForPosition();
                },
                itemCount: snapshot.data.length, // Can be null
              );
            } else if (snapshot.hasError){

            }
            return Container(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }
      ),
    ],
  ),
)

标签： flutterdartflutter-pageview

解决方案

将AppBar小部件放在脚手架 appBar 参数中。

Scaffold(
  appBar: AppBar(),//<-- Move appbar here.
  body: Stack(
    children: [
      FutureBuilder(
          future: _futureMenu,
          builder: (context, snapshot){
            if(snapshot.hasData){
              return PageView.builder(
                itemBuilder: (context, position) {
                  return PageForPosition();
                },
                itemCount: snapshot.data.length, // Can be null
              );
            } else if (snapshot.hasError){
               return Center(child:Text('Error'));
            }
            return Container(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }
      ),
    ],
  ),
)

检查这个飞镖垫。

推荐阅读