Flutter: объединение SliverAppbar с виджетом Column

Я пытаюсь создать страницу событий для приложения, где пользователь может просматривать события с изображением баннера и другой полезной информацией. Мне очень нравится идея реализовать SliverAppBar с баннером, чтобы пользователь мог прокручивать страницу, чтобы увидеть дополнительную информацию. Для этого мне, кажется, нужен CustomScrollView с SliverAppBar и FlexibleSpaceBar.

Все учебные пособия, которые я видел в Интернете, предполагают, что остальная часть экрана должна быть своего рода списком, но я предпочитаю что-то вроде виджета столбца. Однако столбец имеет неограниченную высоту, что вызывает ошибки переполнения в CustomScrollView. Я мог бы обернуть его в Контейнер с указанной высотой, но содержимое тела имеет переменный размер, так что это не идеально. Есть ли способ, чтобы SliverAppBar и Column работали бок о бок?

Я хочу что-то вроде этого:

class ActivityPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              background: Image(someImage),
            ),
            expandedHeight: Image,
            floating: false,
            pinned: true,
            snap: false,
          ),
          Column(
            children: [
              someChildren,
            ]
            ),
          )
        ]),
      ),
    );
  }

Это должно быть возможно, потому что это кажется мне несколько распространенным шаблоном, но я много огляделся и могу найти только примеры, в которых тело состоит из списков ...


flutter listview sliverappbar customscrollview
person Wessel    schedule 03.11.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Для тех, у кого такая же борьба: вот решение, которое я только что нашел:

Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder:
            (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: this.color,
              flexibleSpace: FlexibleSpaceBar(
              background: YourImage(),
              ),
            )
          ];
          },
        body: Container(
          child: Builder(builder: (context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  WidgetOne(),
                  WidgetTwo()
                ]);
          })),
        ),
      )),
    );
  }
person Wessel    schedule 13.11.2020

arrow_upward
1
arrow_downward

Используйте ListView вместо Column. ListView имеет динамический размер

person Strigo    schedule 02.02.2021