所以我想设计一个带有 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"),
),
)
],
),
),
]))
],
),
),
),
),
);
}
}
这就是页面现在的样子:
非常感谢 - 感谢您的帮助。