把页面详细布局传进模板里,达到 Slot 效果
Test 页面
import 'package:flutter/material.dart';
import 'package:microelecdrap/component/large_title_page_layout.dart';
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: LargeTitlePageLayout(
title: "abc",
content: [
Text("111"),
Text("122"),
],
),
);
}
}
大标题页面模板
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class LargeTitlePageLayout extends StatefulWidget {
final String title;
List<Widget> content;
LargeTitlePageLayout({
Key? key,
required this.title,
required this.content
}) : super(key: key);
@override
_LargeTitlePageLayoutState createState() => _LargeTitlePageLayoutState();
}
class _LargeTitlePageLayoutState extends State<LargeTitlePageLayout> {
late ScrollController _scrollController;
Color bgColor = Color(0xFFeff0f5);
bool _scrollTop = false;
void _scrollListener () {
// log("scroll" + _scrollController.offset.toString());
if (_scrollController.offset < 10 && _scrollTop) {
_changeStatusBar(false);
setState(() {
_scrollTop = false;
});
} else if (_scrollController.offset > 10 && !_scrollTop) {
_changeStatusBar(true);
setState(() {
_scrollTop = true;
});
}
}
void _changeStatusBar (bool isScrollTop){
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle;
if (isScrollTop) {
systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark
);
} else {
systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.pink
);
}
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
@override
void initState() {
_scrollController = new ScrollController();
_scrollController.addListener(_scrollListener);
super.initState();
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
backgroundColor: bgColor,
child: CustomScrollView(
controller: _scrollController,
slivers: [
CupertinoSliverNavigationBar(
backgroundColor: _scrollTop ? Color(0xFFf8fafd) : bgColor,
border: Border.all(width: 0.0, color: _scrollTop ? Color(0xFFaaabbb) : bgColor),
leading: Container(),
largeTitle: Text(
widget.title,
style: TextStyle(
color: Colors.black
)
),
),
SliverList(delegate: SliverChildListDelegate(
widget.content
)),
],
));
}
}