flutter 好看的顶部栏 拉上后回自动回收

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 {
  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: [
          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 好看的顶部栏 拉上后回自动回收_第1张图片

你可能感兴趣的:(flutter)