通过前面10篇文章的学习，我们已经对flutter的一些基本控件有一定的了解了。这篇文章尽量使用之前学习的知识，来实现一个我们常见的渐变标题栏。效果如下：
QQ截图20190112102103.png
首先创建一个基础项目。添加如下代码：
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(HomePage());
//状态栏一体化
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //不显示右上角Debug字样
home: Scaffold(
body:Text("提莫")
),
);
}
}
不用想这个时候，界面肯定是很丑的。由于我们需要自定义标题栏，所以就不使用AppBar了。我们自己定义一个渐变的标题栏widget，命名为GradientAppBar。由于我们APP可能不止一处用到该标题栏，所以标题我们通过构造方法传入。如下：
//自定义一个渐变的标题栏
class GradientAppBar extends StatelessWidget {
final String title; // 标题名称
final double barHeight = 60.0; //标题栏高度
GradientAppBar(this.title); //构造方法传入标题栏
@override
Widget build(BuildContext context) {
//todo
}
}
然后修改HomePage中body属性代码如下：
body: Column(
children: <Widget>[
GradientAppBar("提莫"), //自定义渐变标题栏
],
),
我们可以通过MediaQuery对象获取到状态栏的高度:
//获取系统状态栏高度
final double statusBarHeight = MediaQuery.of(context).padding.top;
至于build方法中我们返回一个Container widget，Container widget很多时候，都适用于这种。代码如下：
@override
Widget build(BuildContext context) {
//获取系统状态栏高度
final double statusBarHeight = MediaQuery.of(context).padding.top;
return Container(
padding: EdgeInsets.only(top: statusBarHeight),
height: barHeight + statusBarHeight,
child: Center(
child: Text(
title,
style: const TextStyle(
color: Colors.blue,
fontSize: 30.0,
fontWeight: FontWeight.w400, //字体宽度。
),
),
),
);
}
这个时候运行，效果如下：
QQ截图20190112103425.png
标题已经实现居中了，这个时候来实现背景。通过前面的学习，我们知道Container中有一个decoration装饰容器的属性。这儿我们需要用到它。
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
]
),
),
最终效果：
QQ截图20190112102103.png
小知识点
/** 获取屏幕宽度 */
static double getScreenWidth(BuildContext context) {
return MediaQuery.of(context).size.width;
}
/** 获取屏幕高度 */
static double getScreenHeight(BuildContext context) {
return MediaQuery.of(context).size.height;
}
/** 获取系统状态栏高度 */
static double getSysStatsHeight(BuildContext context) {
return MediaQuery.of(context).padding.top;
}
完整代码
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(HomePage());
//状态栏一体化
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //不显示右上角Debug字样
home: Scaffold(
body: Column(
children: <Widget>[
GradientAppBar("提莫"), //自定义渐变标题栏
],
),
),
);
}
}
//自定义一个渐变的标题栏
class GradientAppBar extends StatelessWidget {
final String title; // 标题名称
final double barHeight = 60.0; //标题栏高度
GradientAppBar(this.title);
@override
Widget build(BuildContext context) {
//获取系统状态栏高度
final double statusBarHeight = MediaQuery.of(context).padding.top;
return Container(
padding: EdgeInsets.only(top: statusBarHeight),
height: barHeight + statusBarHeight,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
]
),
),
child: Center(
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.w400, //字体宽度。
),
),
),
);
}
}
