import 'dart:math';
import "package:flutter/material.dart";
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Demo",
theme: ThemeData(
primarySwatch: Colors.blue,
splashColor: Colors.transparent
),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage> {
Image imageHomeShow = Image.asset("assets/images/juren.jpeg", fit: BoxFit.cover);
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: Text("Slivers Demo")
// ),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
leading: IconButton(
icon: Icon(Icons.build),
onPressed: () {
},
),
// 这个参数的作用是拉上去以后顶部栏是否会在上面
pinned: true,
// 阔展高度
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
// 顶部栏显示的文字和图片
title: Text("hello world"),
background: imageHomeShow,
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 1.5
),
delegate: SliverChildBuilderDelegate(
(BuildContext ctx,int index) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
width: 10,
height: 10
);
},
childCount: 10
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext ctx, int index) {
return ListTile(
leading: Icon(Icons.people),
title: Text("联系人"),
);
}
),
),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
imageHomeShow = Image.asset("assets/images/test.jpg", fit: BoxFit.cover);
});
},
),
);
}
}
flutter 好看的顶部栏 拉上后回自动回收
最新推荐文章于 2022-07-13 13:17:33 发布