社区首页 >专栏 >Flutte部件目录-Material Components 顶

Flutte部件目录-Material Components 顶

南郭先生

发布于 2018-08-14 07:50:11

9.5K0

文章被收录于专栏：Google DartGoogle Dart

实现Material Design指南的视觉，行为和运动丰富的小部件。

查看Flutter窗口小部件目录中的更多小部件。

应用程序结构和导航

Scaffold

Appbar

上面两个在基本部件中已经讲过。

BottomNavigationBar

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

一个显示在应用底部的材质小部件，用于在少量视图中进行选择，通常介于3到5之间。

底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。它提供了应用程序顶级视图之间的快速导航。对于更大的屏幕，侧面导航可能更适合。

底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。

底部导航栏的type会更改其条目的显示方式。如果未指定，则在少于四个项目时自动设置为BottomNavigationBarType.fixed，否则为BottomNavigationBarType.shifting。

BottomNavigationBarType.fixed，缺省情况下，当少于四个条目时。如果选择的项目非空，则使用fixedColor呈现所选项目，否则将使用主题的ThemeData.primaryColor。导航栏的背景色是默认的材质背景色ThemeData.canvasColor（实质上是不透明的白色）。
BottomNavigationBarType.shifting，有四个或更多项目时的默认值。所有项目均以白色呈现，并且导航栏的背景色与所选项目的BottomNavigationBarItem.backgroundColor相同。在这种情况下，假定每个项目将具有不同的背景色，并且背景色将与白色形成鲜明对比。

也可以看看：

继承结构

Object>Diagnosticable>DiagnosticableTree>Widget>StatefulWidget>BottomNavigationBar

构造函数

BottomNavigationBar({Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, BottomNavigationBarType type, Color fixedColor, double iconSize: 24.0 })

创建一个底部导航栏，通常用在Scaffold中，作为Scaffold.bottomNavigationBar参数提供. [...]

属性

currentIndex → int 指向当前活动条目的索引. final
fixedColor → Color 底部导航栏为BottomNavigationBarType.fixed时所选项目的颜色. [...] final
iconSize → double 所有BottomNavigationBarItem图标的大小. [...] final
items → List<BottomNavigationBarItem> 放置在底部的导航栏内的互动条目. final
onTap → ValueChanged<int> 点击条目时调用的回调. [...] final
type → BottomNavigationBarType 定义BottomNavigationBar的布局和行为. [...] final
hashCode → int read-only, inherited key → Key final, inherited runtimeType → Type read-only, inherited

方法

createState() → _BottomNavigationBarState 在树中的给定位置为此小部件创建可变状态. [...]
createElement() → StatefulElement inherited debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited debugFillProperties(DiagnosticPropertiesBuilder description) → void inherited noSuchMethod(Invocation invocation) → dynamic inherited toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited toStringShort() → String inherited