FlutterFlutter

3.flutter开发基础-Widget组件

2018-05-11  本文已影响0人  zzzworm

1.Widge组件分类

在flutter中，所有UI元素都是widget组件，除了我们常见的button，Image这些可见元素，布局也是组件，甚至文本格式控制也是组件。这里我们先简单讲解一下我们通常概念的上的UI控件。在flutter中组件有两种：有状态组件和无状态组件。

2.让我们来创建Hello World

首先我们先来写一个最基本的flutter应用吧。

1.在适当的目录执行：

flutter init -o my_hello_world_app

2.替换my_hello_world_app/lib/main.dart文件中的内容：

import 'package:flutter/material.dart';
void main() => runApp(new Center(child: new Text('Hello, world!')));

3.在my_hello_world_app目录下执行：

flutter start

4.你将会在手机上看到：


这里写图片描述

如果你能一切顺利的来到这里，那么恭喜你，你已经成功使用flutter开发了一个android的应用，虽然这个应用看上去比较单一。

main方法是这个应用的入口，要运行一个应用的话需要使用runApp方法，它接收一个Widget控件作为参数，并且把这个控件作为控件树的根节点。在我们这个例子里，控件树里有两个控件，Center控件和它的子节点Text。通常情况下框架会强制将根控件充满整个屏幕，所以相对的Text控件就以屏幕为中心了。

重要概念：
在编写flutter应用的时候，通常情况下需要自定义组件，这些组件继承自StatelessComponent或StatefulComponent,选择要继承哪一个取决于这个组件是否需要管理状态和配置。一个组件的主要工作就是实现build方法，这个方法用来反应该组件在其他组件中的表现形式。最后底层框架会统一从上到下调用build方法直至渲染树的最底层。

基本控件

flutter提供了一套完备的基本控件，最常用的有如下几个：

下面结合一些基本的控件来自定义我们的组件并构建应用：
修改main.dart代码如下

import 'package:flutter/material.dart';

class MyToolBar extends StatelessComponent { //（3）
  MyToolBar({ this.title });

  final Widget title; //（6）

  Widget build(BuildContext context) {
    return new Container(
      height: 56.0,
      padding: const EdgeDims.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(
        backgroundColor: Colors.blue[500]
      ),
      child: new Row([
        new IconButton(icon: 'navigation/menu'),
        new Flexible(child: title),
        new IconButton(icon: 'action/search'),
      ])
    );
  }
}

class MyScaffold extends StatelessComponent { //（4）
  Widget build(BuildContext context) {
    return new Material(
      child: new Column([
        new MyToolBar(
          title: new Text('Example title', style: Typography.white.title)
        ),
        new Flexible(
          child: new Center(
            child: new Text('Hello, world!')
          )
        )
      ])
    );
  }
}

void main() {
  runApp(new MaterialApp( //(1)
    title: 'My app',
    routes: <String, RouteBuilder>{ //（2）
      '/': (RouteArguments args) => new MyScaffold() //（5）
    }
  ));
}

同时确保flutter.yaml文件内容如下：

name: my_app
material-design-icons:
  - name: action/search
  - name: navigation/menu

我们先来运行一下这个应用：


这里写图片描述

恭喜你，顺利存活。
代码解释如下：

这种flutter这种层层包裹的感觉就是前面提到的组件外构建UI一小部分含义，眼尖的同学可能已经看到（6）处的title使用的是final修饰符，这里要说明一下继承自StatelessComponent的组件，如内部有配置，属性或状态的统一需要使用final修饰符，表示这个组件本身自己是无状态的，需要依赖它外部的其他组件。这也是'组件外构建UI'最重要的含义所在。

Material应用

上面那个应用我们使用自己的组件进行应用开发，发现应用整体美观度不高。是因为flutter中应用界面会撑满整个屏幕，所以有一部分内容可能会被状态栏挡住。其实flutter提供了一系列的控件供开发人员开发Material风格的应用，这之中就有MaterialApp，Scaffold，ToolBar和FloatingActionButton等。下面看一个使用了这些控件的例子：

修改main.dart内容如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      title: 'Flutter Tutorial',
      routes: {'/': (RouteArguments args) => new TutorialHome()}));
}

class TutorialHome extends StatelessComponent {
  Widget build(BuildContext context) {
    return new Scaffold(
        toolBar: new ToolBar(
            left: new IconButton(icon: 'navigation/menu'),
            center: new Text('Example title'),
            right: [new IconButton(icon: 'action/search')]),
        body: new Center(child: new Text('Hello, world!')),
        floatingActionButton:
            new FloatingActionButton(child: new Icon(icon: 'content/add')));
  }
}

修改flutter.yaml文件内容如下：

name: my_app
material-design-icons:
  - name: action/search
  - name: content/add
  - name: navigation/menu

运行结果如下：


这里写图片描述

现在我们的应用看起来是不是更像是一个Material Design的应用了？我们使用的Scaffold和ToolBar让ToolBar自带了阴影并且字体风格有有了调整。另外还加上了FloatingActionButton。

总结

本文主要讲解flutter中的组件分类，对如何创建简单Stateless组件进行了演示

上一篇 下一篇

猜你喜欢

热点阅读