Flutter控件(1)

转载: http://blog.chengyunfeng.com/?p=1041

 

Flutter控件之MaterialApp

MaterialApp代表使用纸墨设计(Material Design)风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。

MaterialApp主要属性如下:

  • title:在任务管理窗口中所显示的应用名字
  • 主题:应用各种UI所使用的主题颜色
  • color:应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色
  • home:应用默认所显示的界面Widget
  • routes:应用的顶级导航表格,这个是多页面应用用来控制页面跳转的,类似于网页的网址
  • initialRoute:第一个显示的路由名字,默认值为Window.defaultRouteName
  • onGenerateRoute:生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
  • onLocaleChanged:当系统修改语言的时候,会触发å这个回调
  • navigatorObservers:应用Navigator的监听器
  • debugShowMaterialGrid:是否显示纸墨设计基础布局网格,用来调试UI的工具
  • showPerformanceOverlay:显示性能标签,https://flutter.io/debugging/#performanceoverlay
  • checkerboardRasterCacheImages,showSemanticsDebugger,debugShowCheckedModeBanner各种调试开关


Flutter控件之脚手架

Scaffold实现了基本的纸墨设计布局结构。在示例应用中,MyHomePage所返回的就是一个Scaffold。也就是说,MaterialApp的孩子是Scaffold Widget。

在纸墨设计中定义的单个界面上的各种布局元素,在Scaffold中都有支持,比如左边栏(抽屉),小吃店,以及底页。

Scaffold有下面几个主要属性:

  • appBar:显示在界面顶部的一个AppBar,也就是Android中的ActionBar,工具栏
  • body:当前界面所显示的主要内容Widget
  • floatingActionButton:纸墨设计中所定义的FAB,界面的主要功能按钮
  • persistentFooterButtons:固定在下方显示的按钮,比如对话框下方的确定,取消按钮
  • 抽屉:侧边栏控件
  • backgroundColor:内容的背景颜色,默认使用的是ThemeData.scaffoldBackgroundColor的值
  • bottomNavigationBar:显示在页面底部的导航栏
  • resizeToAvoidBottomPadding:类似于Android中的android:windowSoftInputMode =“adjustResize”,控制界面内容body是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被记盘盖住内容。默认值为true。

显示snackbar或者bottom sheet的时候,需要使用当前的BuildContext参数调用Scaffold.of函数来获取ScaffoldState对象,然后使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet函数来显示。

要特别注意Scaffold.of的参数BuildContext,如果包含该BuildContext的Widget是Scaffold的父Widget,则Scaffold.of是无法查找到对应的ScaffoldState对象的,Scaffold.of返回的是父对象中最近的Scaffold中的ScaffoldState对象。比如,如果在Scaffold的构建函数中,使用构建的BuildContext参数是可以的:

1

2

3

4

5

6

7

8

9

10

11

12

@override

Widget build(BuildContext context) {

  return new RaisedButton(

    child: new Text('SHOW A SNACKBAR'),

    onPressed: () {

      Scaffold.of(context).showSnackBar(new SnackBar(

        content: new Text('Hello!'),

      ));

    },

  );

}

 

如果构建函数返回一个Scaffold对象,则由于Scaffold对象是这个Widget的子对象,所以使用这个构建的BuildContext参数是不能查找到ScaffoldState对象的,这个时候,通过在Scaffold中使用一个Builder来提供一个新的BuildConext :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

@override

Widget build(BuildContext context) {

  return new Scaffold(

    appBar: new AppBar(

      title: new Text('Demo')

    ),

    body: new Builder(

      // Create an inner BuildContext so that the onPressed methods

      // can refer to the Scaffold with Scaffold.of().

      builder: (BuildContext context) {

        return new Center(

          child: new RaisedButton(

            child: new Text('SHOW A SNACKBAR'),

            onPressed: () {

              Scaffold.of(context).showSnackBar(new SnackBar(

                content: new Text('Hello!'),

              ));

            },

          ),

        );

      },

    ),

  );

}

另外还可以把构建函数中的Widget分别创建,分别引入新的BuildContext来获取Scaffold。

 

Flutter控件之AppBar和SliverAppBar

AppBar和SliverAppBar是纸墨设计中的App Bar,也就是Android中的工具栏,关于工具栏的设计指南请参考纸墨设计中工具栏的内容。

AppBar和SliverAppBar都是继承至StatefulWidget类,都代表Toobar,二则的区别在于AppBar位置的固定的应用最上面的;而SliverAppBar是可以跟随内容滚动的。他们的主要属性如下:

  • leading:在标题前面显示的一个控件,在首页通常显示应用的logo;在其他界面通常显示为返回按钮
  • title:工具栏中主要内容,通常显示为当前界面的标题文字
  • 动作:一个小工具列表,代表工具栏中所显示的菜单,对于常用的菜单,通常使用IconButton来表示;对于不常用的菜单通常使用PopupMenuButton来显示为三个点,点击后弹出二级菜单
  • bottom:一个AppBarBottomWidget对象,通常是TabBar。用来在工具栏标题下面显示一个Tab导航栏
  • elevation:纸墨设计中控件的z坐标顺序,默认值为4,对于可滚动的SliverAppBar,当SliverAppBar和内容同级的时候,该值为0,当内容滚动SliverAppBar变为工具栏的时候,修改elevation的值
  • flexibleSpace:一个显示在AppBar下方的控件,高度和AppBar高度一样,可以实现一些特殊的效果,该属性通常在SliverAppBar中使用
  • backgroundColor:APP bar的颜色,默认值为ThemeData.primaryColor。改值通常和下面的三个属性一起使用
  • 亮度:App bar的亮度,有白色和黑色两种主题,默认值为ThemeData.primaryColorBrightness
  • iconTheme:App栏上图标的颜色,透明度,和尺寸信息。默认值为ThemeData.primaryIconTheme
  • textTheme:App bar上的文字样式。默认值为ThemeData.primaryTextTheme
  • centerTitle:标题是否居中显示,默认值根据不同的操作系统,显示方式不一样

比如下面的代码在App bar上添加了功能按钮和Tabs,并指定标题居中显示,修改App bar背景颜色等:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

@override

  Widget build(BuildContext context) {

    // This method is rerun every time setState is called, for instance

    // as done by the _incrementCounter method above.

    // The Flutter framework has been optimized to make rerunning

    // build methods fast, so that you can just rebuild anything that

    // needs updating rather than having to individually change

    // instances of widgets.

    return new Scaffold(

      appBar: new AppBar(

        title: new Text(config.title),

        leading: new Icon(Icons.home),

        backgroundColor: Colors.amber[500],

        centerTitle: true,

        actions: [

          new IconButton(

              icon: new Icon(Icons.add_alarm),

              tooltip: 'Add Alarm',

              onPressed: () {

                // do nothing

              }),

          new PopupMenuButton(

              itemBuilder: (BuildContext context) => <PopupMenuItem>[

                    new PopupMenuItem(

                        value: "price", child: new Text('Sort by price')),

                    new PopupMenuItem(

                        value: "time", child: new Text('Sort by time')),

                  ],

              onSelected: (String action) {

                switch (action) {

                  case "price":

                    // do nothing

                    break;

                  case "time":

                    // do nothing

                    break;

                }

              })

        ],

        bottom: new TabBar(

          isScrollable: true,

          tabs: [

            new Tab(text: "Tabs 1"),

            new Tab(text: "Tabs 2"),

            new Tab(text: "Tabs 3"),

            new Tab(text: "Tabs 4"),

            new Tab(text: "Tabs 5"),

            new Tab(text: "Tabs 6"),

          ],

        ),

      ),

      body: body,

      floatingActionButton: new FloatingActionButton(

        onPressed: _incrementCounter,

        tooltip: 'Increment',

        child: new Icon(Icons.add),

      ), // This trailing comma makes auto-formatting nicer for build methods.

    );

  }

 

显示效果如下:

图片


 

你可能感兴趣的:(flutter)