Как создать единый пользовательский интерфейс, такой как Sliver AppBar, с помощью Flutter

Вдохновленный новым One UI от Samsung, я хотел реализовать нечто подобное, используя SliverAppBar во Flutter. Но я не могу понять ...

Согласно реализации One UI, SliverAppBar title должен отображаться прямо в центре (как по вертикали, так и по горизонтали) развернутой панели приложений. При этом в свернутом состоянии он должен прилипать к левому краю.

ПРИМЕЧАНИЕ. В моем случае панель приложений также содержит фоновое изображение ... Таким образом, при попытке обернуть FlexibleSpaceBar виджет Column фон выглядит странно.

Я также хочу избавиться от лишних отступов слева (которые доступны по умолчанию, даже если "ведущий" виджет не размещен) при свертывании. Кроме того, было бы лучше, если бы действия появлялись внизу SliverAppBar при раскрытии, чтобы пользователи могли обращаться к ним одной рукой ...

Один интерфейс:

Expanded SliverAppBar Collapsed SliverAppBar 

Left ⇒ Expanded:                    Right ⇒ Collapsed:


- Actions on bottom                 - Actions as usual
- title is centered                 - title is on the left
                                      (no unwanted padding on the left of title)

flutter android user-interface flutter-sliver appbar
person Melvin Abraham    schedule 02.12.2018    source источник
comment
SliverAppBar - это панель приложений для материального дизайна. Если вам нужен индивидуальный дизайн, используйте SliverPersistentHeader   -  person Rémi Rousselet    schedule 02.12.2018
comment
@ RémiRousselet Большое спасибо за это предложение. Я успешно реализовал свой собственный AppBar ... ????   -  person Melvin Abraham    schedule 03.12.2018
comment
Не могли бы вы поделиться своим кодом @MelvinAbraham   -  person willy wijaya    schedule 09.01.2019
comment
@willywijaya Я не реализовал точный One UI, такой как панель приложений, скорее, я понял его суть и попытался реализовать свою собственную версию. Вы можете нажать здесь, чтобы просмотреть код для моей реализации настраиваемой панели приложений. Вам просто нужно вставить MySliverPersistenceHeaderDelegate в SliverPersistentHeader как delegate.   -  person Melvin Abraham    schedule 16.01.2019
comment
спасение жизни! Спасибо!   -  person Jeremi    schedule 26.03.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я создал One Ui Scroll View.

Вы также можете добавить actions и настроить любые другие.

person MaNDOOoo    schedule 12.12.2020

arrow_upward
0
arrow_downward 

NestedScrollView(
    headerSliverBuilder:
        (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
                SliverAppBar(
                    backgroundColor: Palette.primaryBackgroundColor,
                    expandedHeight: 180.0,
                    pinned: true,
                    elevation: 0,
                    centerTitle: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        title: Text("Attachments", style: Styles.appBarTitle),
                    ),
                ));

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

person Keezy Silencer    schedule 23.06.2020