二 Flutter开发实战高仿微信发现页( 四 )


要特别注意 .of 的参数 ,如果包含该的是的父 ,则 .of 是无法查找到对应的对象的,.of 返回的是父对象中最近的中的对象 。比如,如果在的 build 函数中,使用 build 的参数是可以的:
1 @override2 Widget build(BuildContext context) {3return new RaisedButton(4child: new Text('SHOW A SNACKBAR'),5onPressed: () {6Scaffold.of(context).showSnackBar(new SnackBar(7content: new Text('Hello!'),8));9},10);11 }
实例
如果 build 函数返回一个对象,则由于对象是这个的子对象,所以使用这个 build 的参数是不能查找到对象的,这个时候,通过在中使用一个来提供一个新的:
@override2 Widget build(BuildContext context) {3return new Scaffold(4appBar: new AppBar(5title: new Text('Demo')6),7body: new Builder(8// Create an inner BuildContext so that the onPressed methods9// can refer to the Scaffold with Scaffold.of().10builder: (BuildContext context) {11return new Center(12child: new RaisedButton(13child: new Text('SHOW A SNACKBAR'),14onPressed: () {15Scaffold.of(context).showSnackBar(new SnackBar(16content: new Text('Hello!'),17));18},19),20);21},22),23);24 }
另外还可以把 build 函数中的分别创建,分别引入新的来获取。
用法 2.2.7简介
和是 中的 App Bar,也就是中的 ,关于的设计指南请参考 中的内容 。
和都是继承 类,都代表 ,二者的区别在于位置的固定的应用最上面的;而是可以跟随内容滚动的 。
他们的主要属性如下:
实例
import 'package:flutter/material.dart';2 3 class AppBarBottomSample extends StatefulWidget {4@override5_AppBarBottomSampleState createState() => new _AppBarBottomSampleState();6 }7 8 class _AppBarBottomSampleState extends State with SingleTickerProviderStateMixin {9TabController _tabController;10 11@override12void initState() {13super.initState();14_tabController = new TabController(vsync: this, length: choices.length);15}16 17@override18void dispose() {19_tabController.dispose();20super.dispose();21}22 23void _nextPage(int delta) {24final int newIndex = _tabController.index + delta;25if (newIndex < 0 || newIndex >= _tabController.length)26return;27_tabController.animateTo(newIndex);28}29 30@override31Widget build(BuildContext context) {32return new MaterialApp(33home: new Scaffold(34appBar: new AppBar(35title: const Text('AppBar Bottom Widget'),36leading: new IconButton(37tooltip: 'Previous choice',38icon: const Icon(Icons.arrow_back),39onPressed: () { _nextPage(-1); },40),41actions: [42new IconButton(43icon: const Icon(Icons.arrow_forward),44tooltip: 'Next choice',45onPressed: () { _nextPage(1); },46),47],48bottom: new PreferredSize(49preferredSize: const Size.fromHeight(48.0),50child: new Theme(51data: Theme.of(context).copyWith(accentColor: Colors.white),52child: new Container(53height: 48.0,54alignment: Alignment.center,55child: new TabPageSelector(controller: _tabController),56),57),58),59),60body: new TabBarView(61controller: _tabController,62children: choices.map((Choice choice) {63return new Padding(64padding: const EdgeInsets.all(16.0),65child: new ChoiceCard(choice: choice),66);67}).toList(),68),69),70);71}72 }73 74 class Choice {75const Choice({ this.title, this.icon });76final String title;77final IconData icon;78 }79 80 const List choices = const [81const Choice(title: 'CAR', icon: Icons.directions_car),82const Choice(title: 'BICYCLE', icon: Icons.directions_bike),83const Choice(title: 'BOAT', icon: Icons.directions_boat),84const Choice(title: 'BUS', icon: Icons.directions_bus),85const Choice(title: 'TRAIN', icon: Icons.directions_railway),86const Choice(title: 'WALK', icon: Icons.directions_walk),87 ];88 89 class ChoiceCard extends StatelessWidget {90const ChoiceCard({ Key key, this.choice }) : super(key: key);91 92final Choice choice;93 94@override95Widget build(BuildContext context) {96final TextStyle textStyle = Theme.of(context).textTheme.display1;97return new Card(98color: Colors.white,99child: new Center(100child: new Column(101mainAxisSize: MainAxisSize.min,102crossAxisAlignment: CrossAxisAlignment.center,103children: