SliverAppBar 屏幕中间的 TabBar

时间:2021-05-12 11:20:07

标签: flutter dart flutter-sliver

所以我想设计一个带有 SliverAppBar 的书籍详细信息页面,其中放置了书籍的图像,在图像下方我想要一个书名和作者,在其下方我有关于一本书的自定义信息小部件,然后我想要放置一个 tabBar,我可以在其中切换不同的内容(第一个选项卡 = 包含我对页面描述的描述,第二个选项卡 = 特定标题的编辑器描述)。

我不确定我应该如何以及在小部件树中的位置放置 DefaultTabController 和 TabBarView 以便我可以为每个选项卡提供不同的内容?

我在 SliverList 中创建了我的标签(见下文)。

class BookDetailScreen extends StatelessWidget {
  static const route = "/book-detail";

  @override
  Widget build(BuildContext context) {
    final bookID = ModalRoute.of(context).settings.arguments as String;
    final selectedBook = DUMMY_BOOKS.firstWhere((book) => book.id == bookID);

    return Container(
      child: DefaultTabController(
        length: 2,
        child: Scaffold(
          body: Container(
            child: CustomScrollView(
              slivers: [
                SliverAppBar(
                    pinned: true,
                    stretch: true,
                    expandedHeight: MediaQuery.of(context).size.height * 0.3,
                    collapsedHeight: MediaQuery.of(context).size.height * 0.1,
                    backgroundColor: Colors.white,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(
                        selectedBook.bookImageUrl,
                      ),
                    )),
                SliverList(
                    delegate: SliverChildListDelegate([
                  Padding(
                    padding:
                        const EdgeInsets.only(top: 24, left: 20, right: 25),
                    child: Text(
                      selectedBook.title,
                      style: Theme.of(context).textTheme.headline6,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5, left: 20),
                    child: Text(
                      selectedBook.author,
                      style: Theme.of(context).textTheme.headline5,
                    ),
                  ),
                  BookInfoBar(
                    numberOfPages: "${selectedBook.numberOfPages}",
                    bookLanguage: selectedBook.language,
                    bookCondition: selectedBook.bookCondition,
                  ),
                  Container(
                    height: 30,
                    margin: const EdgeInsets.only(bottom: 20),
                    padding: const EdgeInsets.only(left: 25),
                    child: TabBar(
                      labelPadding: const EdgeInsets.all(0),
                      indicatorPadding: const EdgeInsets.all(0),
                      isScrollable: true,
                      labelStyle: Theme.of(context).textTheme.headline1,
                      labelColor: Theme.of(context).accentColor,
                      indicator: UnderlineTabIndicator(
                          borderSide: BorderSide(width: 1.5),
                          insets: EdgeInsets.only(right: 35)),
                      tabs: [
                        Tab(
                          child: Container(
                            margin: const EdgeInsets.only(right: 30),
                            child: const Text("Description"),
                          ),
                        ),
                        Tab(
                          child: Container(
                            margin: const EdgeInsets.only(right: 25),
                            child: const Text("Editors description"),
                          ),
                        )
                      ],
                    ),
                  ),
                ]))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这就是页面现在的样子:

enter image description here

非常感谢 - 感谢您的帮助。

0 个答案:

没有答案