前言:《Hello, Flutter》是我近期的一个写作计划。我的目标是写一篇篇简短的教程,提供给
Flutter
的初级用户,让他们能够快速掌握Flutter
开发。代码地址:https://github.com/flycash/hello_flutter
今天我们来讨论一下AppBar
组件。
在之前一篇Hello, Flutter(二)——Scaffold里面大家应该算是初步认识了AppBar
,今天来看一下更加详细的用法。
先来看一下谷歌Flutter
官网上对AppBar
的一个形象化描述:
AppBar
的用法极其简单:
这是一个比较完整的示例。唯独需要注意的是,即便我在代码里面将title
设置为Center
,然而严格意义上来说,title
所在的字符串并不是居于AppBar
的中间。实际上,在这里的Center
的语义是指排除了leading
和actions
两个配置之后的剩余的位置的中间。
这里还有一个问题,就是那个actions
究竟能够放几个呢?
答案是取决于你的屏幕和设置的action
的大小。当我什么都不设置的时候,在iphoneXR
上放到十几个的时候:
title
被压缩掉了。
继续增加actions
,最终报错了:
一种惯常用法是在上面加入一个搜索框:
实际上就是把title
换成一个输入框而已。
但是有一个地方要注意的是,返回按钮一般不是通过AppBar
来实现的。而是在你使用跳转页面的时候,即Navigator.push
方法之后产生的。