Складная панель инструментов с вкладкой и поднятой кнопкой - PullRequest
Новая
       88

Складная панель инструментов с вкладкой и поднятой кнопкой

0 голосов
/ 17 апреля 2020

Я хотел бы создать складную панель инструментов с TabBar. Я пытаюсь перекрыть кнопку между складной панелью инструментов и панелью вкладок. Кнопка должна отображать sh вместе с изображением при прокрутке вверх. 

class Refurb extends StatefulWidget {
  @override
  _MainCollapsingToolbarState createState() => _MainCollapsingToolbarState();
}

class _MainCollapsingToolbarState extends State<Refurb> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 275.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    background: Stack(
                      alignment: Alignment.center,
                      children: [
                        Column(
                          children: [
                            Image.network(
                              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                              fit: BoxFit.fill,
                            ),
                            SizedBox(
                              height: 25,
                            )
                          ],
                        ),
                        RaisedButton(
                          onPressed: () {},
                          child: Text("sample button"),
                        ),
                      ],
                    ),
                    title: Column(
                      children: [
                        Text("Collapsing Toolbar",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ))
                      ],
                    )),
              ),
              SliverPersistentHeader(
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    labelColor: Colors.black87,
                    unselectedLabelColor: Colors.grey,
                    tabs: [
                      Tab(text: "Tab 1"),
                      Tab(text: "Tab 2"),
                    ],
                  ),
                ),
                pinned: true,
              ),
            ];
          },
          body: Center(
            child: Text("Sample text"),
          ),
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Проблема в том, что

  1. RaisedButton не находится в перекрытии в центре снизу сворачиваемого изображения панели инструментов.
  2. Вставка переполняется при прокрутке вниз.

что мне не хватает?

...