Скрыть, чтобы продолжать отображать нижнюю часть Sliver App Bar

Ответ

Чтобы показать только нижнюю часть Sliver App Bar и предотвратить её скрытие при прокрутке, можно использовать свойство bottom в сочетании с flexibleSpace. Это позволит сохранить нижнюю часть видимой, даже когда сам App Bar уменьшен.

Вот пошаговое объяснение, как это сделать:

1. Создайте SliverAppBar: Вам нужно будет использовать SliverAppBar в вашем CustomScrollView.

2. Настройте свойство ‘bottom’: Вам нужно передать bottom свойство, которое будет отображать нужные вам элементы (например, TabBar или другие виджеты) даже когда App Bar минимизирован.

Вот пример кода, который демонстрирует, как это сделать:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  "https://example.com/image.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(50.0),
                child: Container(
                  color: Colors.white,
                  child: TabBar(
                    tabs: [
                      Tab(text: "Tab 1"),
                      Tab(text: "Tab 2"),
                    ],
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item #$index'),
                  );
                },
                childCount: 50, // количество элементов в списке
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Пояснения к коду:

• SliverAppBar: Мы создаем SliverAppBar с expandedHeight, который контролирует высоту, когда панель расширена.
• pinned: Установив это свойство в true, мы обеспечиваем, что нижняя часть приложения остается видимой, даже когда App Bar минимизирован.
• bottom: С помощью PreferredSize мы добавляем TabBar, который будет отображаться внизу SliverAppBar и оставаться в пределах UIView после сокращения верхней панели.

Заключение

Таким образом, вы можете сохранить видимость нижней части Sliver App Bar, даже когда панель сворачивается при прокрутке. Убедитесь, что вы правильно настроили pinned и добавили нужные элементы в свойство bottom, чтобы оно отображалось, когда панель сокращена.