[英]Can we apply rounded borders to SliverAppBar in Flutter?
[我想在我的商店應用程序中實現這個帶有圓形應用程序欄的 UI] ( https://i.stack.imgur.com/YoIIR.jpg )
當我使用 ClipRRect 將圓角邊框應用於 SliverAppBars 時,出現此錯誤。 但是,我可以將 ClipRRect 應用於普通的 appBar。 我需要一個 sliverAppBar 來隱藏標題,並且只在向上滾動時顯示我的選項卡以節省屏幕空間。
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb](state: RawGestureDetectorState#5a576(gestures: <none>, behavior: opaque)):
A RenderNestedScrollViewViewport expected a child of type RenderSliver but received a child of type RenderClipRRect.
RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderNestedScrollViewViewport that expected a RenderSliver child was created by: NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ClipRect ← ⋯
The RenderClipRRect that did not match the expected child type was created by: ClipRRect ← NestedScrollViewViewport ← IgnorePointer-[GlobalKey#845ec] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#782cb] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#9de96] ← NotificationListener<ScrollMetricsNotification> ← Transform ← ⋯
The relevant error-causing widget was
NestedScrollView
lib\…\screens\news_feed.dart:27
When the exception was thrown, this was the stack
這是我的代碼。
class NewsFeed extends StatelessWidget {
const NewsFeed({Key? key}) : super(key: key);
static const List<Widget> screens = [
RetailsScreen(),
ElonsScreen(),
RentalsScreen(),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
initialIndex: 0,
child: Scaffold(
backgroundColor: AppColors.semiWhiteBackground,
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
child: SliverAppBar(
title: const LocaleText('newsFeed'),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: const TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 5,
indicatorColor: AppColors.secondary,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
tabs: [
Tab(
child: LocaleText(
'buyAndSell',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: LocaleText(
'elons',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: LocaleText(
'rental',
style: TextStyle(color: Colors.white),
),
),
],
),
),
),
];
},
body: const TabBarView(
children: screens,
),
),
),
);
}
}
我使用 SliverAppBar 能夠在向上滾動時隱藏 appBar 的 scrollBar 部分。
請更新您的代碼:
從ClipRRect
中刪除sliverAppBar
並使用sliverAppBar
的形狀屬性
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60))),
完整代碼:
NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: const Text('newsFeed'),
pinned: true,
floating: true,
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60))),
forceElevated: innerBoxIsScrolled,
bottom: const TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 5,
indicatorColor: Colors.yellow,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
tabs: [
Tab(
child: Text(
'buyAndSell',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
'elons',
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
'rental',
style: TextStyle(color: Colors.white),
),
),
],
),
),
];
},
body: Container(),
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.