我需要創建一個自定義的 sliver 應用欄，當用戶開始滾動時它會縮小。擴展的應用欄將有兩個不同的功能：
- 背景圖
- 標簽欄
滾動前預期的 sliverappbar：
由于，用戶開始滾動 appbar 將成為AppBarflutter 提供的默認值
這就是我迄今為止所做的。代碼是：
class _MerchantSliverAppbarState extends State<MerchantSliverAppbar> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return SliverAppBar(
expandedHeight: 200.0,
pinned: true,
floating: false,
snap: false,
leading: CustomBackButton(
greyBackground: false,
),
flexibleSpace: FlexibleSpaceBar(
background: Stack(
children: [
Container(
height: 200,
width: size.width,
child: Image.asset(
"assets/images/mock_background.png",
fit: BoxFit.cover,
),
),
],
),
),
);
}
}
正如你所看到的，我試圖讓背景影像占據整個空間，但由于某種原因，我仍然有一點額外的空間（藍色區域）。
我也有放置標簽欄的紅色區域。
- 為什么我會得到額外的藍色空間，我該如何解決？
- 如何使用此應用欄實作標簽欄？
uj5u.com熱心網友回復：
首先，您的影像不適合您的容器，而是將其用作背景影像：
Container(
height: 200,
width: size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
image: DecorationImage(
image: AssetImage(
'assets/images/test.jpg'),
fit: BoxFit.fill,
),
),
)
對于標簽欄，您可以點擊此鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/388063.html