英文:
How to make a floating widget just below AppBar in flutter
问题
我正在尝试使用Flutter实现以下设计。
我可以通过以下代码示例来实现这一点。
Scaffold(
drawer: const NavDrawer(), // 抽屉小部件
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: const Icon(Icons.notifications),
onPressed: () {
//...
},
),
IconButton(
icon: const Icon(Icons.filter_alt),
onPressed: () {
//...
},
),
],
),
body: Column(
children: [
const CommonSearchBar(), // 常见搜索栏小部件。
Expanded(
child: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (context, value) {
return [
SliverList(
delegate: SliverChildListDelegate.fixed(
[
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'assets/images/valentine_image.png'),
),
],
),
),
];
},
body: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amber,
child: Center(child: Text('$index')),
);
}),
),
),
],
),
),
这里搜索栏需要保留在屏幕上,其余部分在滚动时需要滚动。
但我对Flutter非常陌生,我需要知道这是否是更好的实现方式。
如果不是,请帮助我以更好的方式实现这个。
谢谢。
英文:
I am trying to implement the below design with Flutter.
I could manage to do that by following the code sample.
Scaffold(
drawer: const NavDrawer(), // drawer widget
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: const Icon(Icons.notifications),
onPressed: () {
//...
},
),
IconButton(
icon: const Icon(Icons.filter_alt),
onPressed: () {
//...
},
),
],
),
body: Column(
children: [
const CommonSearchBar(), // common search bar widget.
Expanded(
child: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (context, value) {
return [
SliverList(
delegate: SliverChildListDelegate.fixed(
[
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'assets/images/valentine_image.png'),
),
],
),
),
];
},
body: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amber,
child: Center(child: Text('$index')),
);
}),
),
),
],
),
),
here Search bar needs to stay on the screen and the rest of the part needs to scroll while scrolling.
but I am very new to Flutter and I need to know if is this the better approach to do this.
If not please help me to implement this in a better way.
thank you.
答案1
得分: 0
Without dependency - Sliver App Bar
With dependency: Sticky Header
英文:
For your requirement you should try with dependency and without dependency.
Without dependency - Sliver App Bar
With dependency :- Sticky Header
答案2
得分: 0
你可以更容易地使用SliverAppBar来实现。
您不必使用Scaffold的appBar属性,只需将SliverAppBar添加到headerSlivers中。在SliverAppBar中,您可以添加一个底部小部件,它将与应用栏一起保持在顶部,您可以将操作按钮和标题添加到其中。
一个最小的示例:
Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
title: Text("Title"),
floating: false,
snap: false,
pinned: true,
actions: [
IconButton(
icon: const Icon(Icons.notifications),
onPressed: () {
//...
},
),
IconButton(
icon: const Icon(Icons.filter_alt),
onPressed: () {
//...
},
),
],
bottom: PreferredSize(
preferredSize: Size(double.infinity, 50),
child: Text("Search")
),
)
];
},
body: ListView.builder(
itemCount: 200,
itemBuilder: (context, index) {
return Text("$index item");
},
),
)
);
英文:
You can do it easier with a SliverAppBar
You don't have to use the scaffold appBar property, just add a SliverAppBar to the headerSlivers.
In the SliverAppBar you can add a bottom widget what will stay on top with the app bar, you can add the action buttons and title to it.
A minimal example:
Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
title: Text("Title"),
floating: false,
snap: false,
pinned: true,
actions: [
IconButton(
icon: const Icon(Icons.notifications),
onPressed: () {
//...
},
),
IconButton(
icon: const Icon(Icons.filter_alt),
onPressed: () {
//...
},
),
],
bottom: PreferredSize(
preferredSize: Size(double.infinity, 50),
child: Text("Search")
),
)
];
},
body: ListView.builder(
itemCount: 200,
itemBuilder: (context, index) {
return Text("$index item");
},
),
)
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论