Расширяемый липкий заголовок флаттера внутри TabBarView - PullRequest
1 голос
/ 28 февраля 2020

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

Мой подход был следующий код:

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              floating: true,
              title: Text(
                'Test',
              ),
              bottom: TabBar(
                tabs: [
                  Tab(text: "Call"),
                  Tab(text: "Message"),
                ],
              ),
            ),
          ];
        },
        body: TabBarView(
          children: [
            //HomepageShows(),
            MyList(),
            Container(),
          ],
        ),
      ),
    );
  }
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverStickyHeader(
          header: Container(color: Colors.red, child: Text('Header 1')),
          sliver: SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 1')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 2')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 3')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 4')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 5')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 6')),
            ]),
          ),
        ),
        SliverStickyHeader(
          header: Container(color: Colors.red, child: Text('Header 2')),
          sliver: SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 1')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 2')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 3')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 4')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 5')),
              Container(
                  height: 80, color: Colors.yellow, child: Text('Item 6')),
            ]),
          ),
        ),
      ],
    );
  }
}
  • Как я могу расширить SliverList при нажатии на заголовок?
  • А как сделать плавающий SliverAppBar (в данный момент SliverAppBar появляется только при прокрутке вверх)?

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...