AppBar

import 'package:flutter/material.dart';voidmain() {

runApp( MaterialApp(

title:'Flutter gesture',

home: _home(),

));

}class_home extends StatefulWidget {

@override

StatecreateState() {return_homeState();

}

}class _homeState extends State<_home>{

final GlobalKey scaffoldKey = GlobalKey();

final SnackBar snackBar= const SnackBar(content: Text('Showing Snackbar'));voidopenPage(BuildContext context) {

Navigator.push(context, MaterialPageRoute(

builder: (BuildContext context) {returnScaffold(

appBar: AppBar(

title:const Text('Next page'),

),

body:constCenter(

child: Text('This is the next page',

style: TextStyle(fontSize:24),

),

),

);

},

));

}//...

Widget build(BuildContext context) {returnScaffold(

key: scaffoldKey,

appBar: AppBar(

title:const Text('AppBar Demo'),

actions:[

IconButton(

icon:constIcon(Icons.add_alert),

tooltip:'Show Snackbar',

onPressed: () {

scaffoldKey.currentState.showSnackBar(snackBar);

},

),

IconButton(

icon:constIcon(Icons.navigate_next),

tooltip:'Next page',

onPressed: () {

openPage(context);

},

),

],

),

body:constCenter(

child: Text('This is the home page',

style: TextStyle(fontSize:24),

),

),

);

}

}

import 'package:flutter/material.dart';

void main() {

runApp( MaterialApp(

title: 'Flutter gesture',

home: DiscoverListPage(),

));

}

class DiscoverListPage extends StatefulWidget {

@override

State createState() => DiscoverListState();

}

class DiscoverListState extends State

with TickerProviderStateMixin {

@override

Widget build(BuildContext context) {

return Scaffold(

body: NestedScrollView(

headerSliverBuilder: _sliverBuilder,

body: Center(

child: ListView.builder(

itemBuilder: _itemBuilder,

itemCount: 150,

),

)),

);

}

List _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {

return [

SliverAppBar(

//标题居中

centerTitle: true,

//展开高度200

expandedHeight: 150.0,

//不随着滑动隐藏标题

floating: false,

//固定在顶部

pinned: true,

flexibleSpace: FlexibleSpaceBar(

centerTitle: true,

title: Text('我是一个FlexibleSpaceBar'),

background: Image.network(

"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531798262708&di=53d278a8427f482c5b836fa0e057f4ea&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg",

fit: BoxFit.cover,

),

),

),

SliverPersistentHeader(

//不随着滑动隐藏标题

floating: false,

pinned: true,//固定在顶部

delegate: _SliverAppBarDelegate(

TabBar(

indicatorColor:Colors.blue[300],

labelColor: Colors.red,

unselectedLabelColor: Colors.grey,

tabs: [

Tab(icon: Icon(Icons.cake), text: '左侧'),

Tab(icon: Icon(Icons.golf_course), text: '右侧'),

],

controller: TabController(length: 2, vsync: this),

)))

];

}

Widget _itemBuilder(BuildContext context, int index) {

return ListTile(

leading: Icon(Icons.android),

title: Text('无与伦比的标题+$index'),

);

}

}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {

_SliverAppBarDelegate(this._tabBar);

final TabBar _tabBar;

@override

double get minExtent => _tabBar.preferredSize.height;

@override

double get maxExtent => _tabBar.preferredSize.height;

@override

Widget build(

BuildContext context, double shrinkOffset, bool overlapsContent) {

return Container(

color: Colors.lightGreen[300],

child: _tabBar,

);

}

@override

bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {

return false;

}

}

Scaffold.appBar

import 'package:flutter/material.dart';voidmain() {

runApp( MaterialApp(

title:'Flutter gesture',//home: TutorialHome(),

home: _home(),

));

}class_home extends StatefulWidget {

@override

StatecreateState() {return_homeState();

}

}class _homeState extends State<_home>{int _count = 0;

@override

Widget build(BuildContext context) {returnScaffold(

appBar:newAppBar(

backgroundColor: Colors.green,//设置标题栏的背景颜色

title: newTitle(

child:newText('这是一个标题',

style:newTextStyle(

fontSize:20.0,

color: Colors.white,

),

),

color: Colors.white,//设置标题栏文字的颜色(new title的时候color不能为null不然会报错一般可以不用new title 直接new text,不过最终的文字里面还是以里面new text的style样式文字颜色为准)

),

centerTitle:true,//设置标题居中

elevation: 10.0,//设置标题栏下面阴影的高度

leading: newBuilder(

builder: (BuildContext context){return new GestureDetector(//设置事件

child: new Icon(//设置左边的图标

Icons.account_circle,//设置图标内容

color: Colors.white,//设置图标的颜色

),

onTap:(){

print('点击');

},

onLongPress: (){

Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('长按'))

);

},

onDoubleTap: (){

Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('双击'))

);

},

);

}

),//brightness:Brightness.dark,//设置明暗模式(不过写了没看出变化,后面再看)

primary: true,//是否设置内容避开状态栏//flexibleSpace: ,//伸缩控件后面再看//automaticallyImplyLeading: true,

actions: [ //设置显示在右边的控件

newPadding(

child: Row(

children:[

Container(

margin: EdgeInsets.fromLTRB(0, 0, 25, 0),//调整间距

child: new Icon(//设置左边的图标

Icons.add,//设置图标内容

color: Colors.white,//设置图标的颜色

),

),

Container(

child:new Icon(//设置左边的图标

Icons.account_circle,//设置图标内容

color: Colors.white,//设置图标的颜色

),

),

],

),

padding: EdgeInsets.all(10.0),

),

],

bottom:PreferredSize(//设置标题下面的view

child: newContainer(

height:50.0,

child:newCenter(

child:newText('显示在title下面',

),

),

decoration: BoxDecoration(

color: Colors.red,

),

),

preferredSize: Size.fromHeight(50.0),

),

),

);

}

}

跑起来

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐