Как использовать PageView со стеком?

Я новичок во Flutter, и мне нравится виджет PageView, но как мне всегда иметь AppBar или другие элементы наверху? Теперь PageView меняет всю страницу вместе с AppBar, как вы можете закрепить это? Чтобы страницы прокручивались под 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(),
              ),
            );
          }
      ),
    ],
  ),
)

flutter dart flutter-pageview
person Alexander Schurf    schedule 20.01.2021    source источник
comment
Пожалуйста, предоставьте код или фрагмент. Ваш вопрос непонятен   -  person Gourango Sutradhar    schedule 20.01.2021
comment
Я вставил часть кода, мне нужно, чтобы AppBar всегда был на экране (не перемещался вместе с PageView), как если бы первый уровень приложения   -  person Alexander Schurf    schedule 20.01.2021
comment
Это требование, что вы хотите использовать стек? скорее это appBar?   -  person Gourango Sutradhar    schedule 20.01.2021
comment
Я изменил пример, чтобы было более понятно, что я хочу получить в результате   -  person Alexander Schurf    schedule 20.01.2021
comment
В моем примере я хочу, чтобы контейнер был поверх всех страниц, но он был скрыт за PageView.   -  person Alexander Schurf    schedule 20.01.2021
comment
Я понимаю, пожалуйста, ответьте на мой ответ. Надеюсь, это вам поможет.   -  person Gourango Sutradhar    schedule 20.01.2021

Ответы (3)


arrow_upward
0
arrow_downward

Поместите виджет AppBar в параметр scaffold 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(),
              ),
            );
          }
      ),
    ],
  ),
)

Проверьте этот дротик.

person Ratakondala Arun    schedule 20.01.2021

arrow_upward
0
arrow_downward

Вы можете попробовать использовать код slverAppbar следующим образом

SliverAppBar(
              expandedHeight: 300.0,
              pinned: true,

Закрепленный позволяет ему оставаться наверху, если вам нужна дополнительная помощь по этому способу создания панели приложений, дайте мне знать, чтобы помочь более подробно объяснить

person Kyle Noome    schedule 20.01.2021

arrow_upward
0
arrow_downward

Вы можете использовать CustomScrollView, как показано ниже, чтобы получить свой пользовательский интерфейс и эффект.

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    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: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ],
)
person Gourango Sutradhar    schedule 20.01.2021