flutter - 在 Flutter 的 SliverAppBar 中添加 AppBar
问题描述
我是 Flutter 的新手。我想在 SliverAppBar 内显示搜索框,并在底部的网格视图中显示项目。这样当用户向上滑动时,它只会显示 sliver 应用程序内的搜索框。现在看起来像这样https://ibb.co/MB4Ww6v。我想在 sliver 应用程序底部制作搜索框,如图中的红色所示。
这是我的代码。
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
centerTitle: true,
flexibleSpace: AppBar(
title: Container(
height: 45,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 5, left: 15),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('sesarch');
},
),
filled: true,
fillColor: Colors.white,
hintText: "What are you looking for ?",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
elevation: 20,
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: 100,
child: Center(
child: Text('eee'),
),
);
},
),
),
],
),
);
}
解决方案
您可以在下面复制粘贴运行完整代码
您可以使用bottom
属性SliverAppBar
代码片段
SliverAppBar(
pinned: true,
expandedHeight: 200,
centerTitle: true,
bottom: AppBar(
title: Container(
工作演示
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 200,
centerTitle: true,
bottom: AppBar(
title: Container(
height: 45,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 5, left: 15),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('sesarch');
},
),
filled: true,
fillColor: Colors.white,
hintText: "What are you looking for ?",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
elevation: 20,
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: 100,
child: Center(
child: Text('eee'),
),
);
},
),
),
],
),
);
}
}
推荐阅读
- windows - 如何向使用 sessionhost 的用户发送 RdsUserSessionMessage?
- electron - 从 NAS 运行时,Electron 应用程序变慢
- java - java - 如何在Java的XWPFDocument中添加新行?
- json - 快速不规则 json 解析
- c# - 将 JToken 添加到 JObject 中的特定 JsonPath
- javascript - 订阅后如何获取用户信息?
- angular - 单击按钮在 Angular 中下载文件
- spacy - 将 SpaCy PhraseMatcher 保存到磁盘
- javascript - 如何获取 github html div 元素 gist id
- javascript - 将一串逗号分隔的数字转换为二维数组