flutter(三)flutter组件

你好,【程序职场】专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率,从技术到管理一步步提升自我!
 
标签:一个执着的职场程序员!

 

上篇文章为大家讲述了flutter的开发工具的介绍和安装;本篇文章接着上篇内容继续为大家介绍flutter的组件,本文针对功能点做特殊实例讲解,特别详细的整体使用我们会在其它的文章中来展开说明。

1. Widget组件类

在Flutter中,我们平时自定义的widget,一般都是继承自StatefulWidget(动态组件)或StatelessWidget(静态组件)(并不是只有这两种),这两种widget也是目前最常用的两种。如果一个控件自身状态不会去改变,创建后就直接显示,不会有颜色设置、大小设置或者其他属性的变化,这种widget一般都是继承自StatelessWidget,常见的有Container、ScrollView等

如果一个控件需要动态的去改变或者有相应一些状态,例如点击状态、色值、内容区域等等,这些一般都是继承自StatefulWidget,常见的有CheckBox、AppBar、TabBar等。其实单纯的从名字也可以看出这两种widget的区别,这两种widget都是继承自Widget类。

 

上面主要讲述了widget组件类,我们主要讲述两种组件(StatelessWidget 静态组件)和(StatefulWidget 动态组件)。

2 .(StatelessWidget 静态组件)和(StatefulWidget 动态组件)

(1)无状态组件(StatelessWidget 静态组件)是不可变的,这意味着属性不能改变,所有的值都是最终的。

(2)有状态组件(StatefulWidget 动态组件)持有状态可能在Widget生命周期中发生变化。
实现一个StatefulWidget至少需要两个类

1.一个StatefulWidget类

2. 一个State类。StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在

3 .(State类)

上面说到了StatefulWidget(动态组件),本身StatefulWidget 类本身是不变化的,但是 集成State类在Widget生命周期中始终存在,导致变化。

我们先说下State的作用 主要有两点:

1. 在widget构建的时候可以被同步读取;

2. 在widget的生命周期中可能会被改变。

4.State生命周期

State的生命周期有四种状态

created:当State对象被创建时候,State.initState方法会被调用;

initialized:当State对象被创建,但还没有准备构建时,State.didChangeDependencies在这个时候会被调用;

ready:State对象已经准备好了构建,State.dispose没有被调用的时候;

defunct:State.dispose被调用后,State对象不能够被构建

5. flutter基本组件及其概念

  • runApp函数接受指定的控件(Widget),并使其作为控件树(widget tree)的根控件
  • Text:文本控件,在应用中创建各种样式的文本。
  • Row,Column:Flex控件,可以创建水平(Row)或垂直(Column)方向的布局,是基于Web的flexbox的布局模式设计的。
  • Stack:非线性布局(水平或垂直),控件可以堆叠在其他控件上,可以使用Positioned控件控制Stack相对顶部、右部、底部和左部的位置,是基于Web的absolute定位的布局模式。
  • Container:创建矩形的可视元素,可以用BoxDecoration来设计样式,比如背景、边框和阴影,Container也有边距、填充和大小限制,另外,还可以在三维空间利用矩阵进行变换。
  • Container(容器)为子控件设置Row(水平)布局,中间的title控件被设置成Expanded,Expanded的作用是展开Row、Column和Flex的子控件,意味它可以使用剩余的所有空间。
  • Navigator,通过字符串标识来管理堆叠的界面,也称为routes。Navigator让应用程序各个界面之间平滑地过渡。
  • Scaffold:脚手架,能够实现基本的app的结构,包括appbar body drawer。是实现基本质感设计可视化的布局结构,Scaffold控件使用多种不同的控件作为命名参数,并将每一个布置在Scaffold适当的位置。
  • leading:是在title之前进行显示。
  • tooltip:是长按时候的提示语
  • appBar:显示在手机上的bar
  • actions:是在显示在titlte后面的widget的集合
  • body:主体部位。
  • GestureDetector:点击后会调用 onTap,并且 检测各种输入手势,包括点击、拖动和缩放。
  • StatefulWidget,这个控件存储可变状态, 在createState()方法中返回的就是 实现State的对象,在里面如果要进行状态的改变(也就是要刷新布局)就要调用setState({});
  • StatelessWidget:无状态控件,这时候只需要在build中进行渲染控件就行了。
  • BoxDecoration:用来进行装饰控件。设置颜色,阴影,边距线等。
  • color:设置颜色 能够通过color:Colors.yellow进行设置基础颜色,也能通过 color:const Color(0xffff0000)进行指定颜色,注意要指定透明度。
  • TextStyle:设置字体样式
  • new Image,用于从ImageProvider获取图像。
  • new Image.asset,用于使用key从AssetBundle获取图像。
  • new Image.network,用于从URL地址获取图像。
  • new Image.file,用于从File获取图像。
  • Stack即层叠布局控件,能够将子控件层叠排列。 Stack控件的每一个子控件都是定位或不定位,定位的子控件是被Positioned控件包裹的
  • ListView:实现滚动
  • Align:进行设置对齐方式,主要用于stact中
  • SizedBox:无论设置的有多小,都能最少包含里面的内容。
  • AspectRatio:中属性aspectRation 设置容器的宽高比例
  • DecoratedBox:能够在渲染组件的时候,能渲染装饰。
  • Opacity:其中的属性opacity 设置透明度
  • PopupMenuButton:设置弹出的框子类似popupWindow
     

   组件先整理这么多,还有一些我们后面讲解的时候 做特殊说明。

5. StatelessWidget 静态组件  实例

上面讲到了静态组件 StatelessWidget  那么我们怎么理解 静态组件的实现呢,下面举几个实例 一一说明。

  • Text组件显示一个文本信息
     
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Text(
            '你好吗?',
            textDirection: TextDirection.ltr,
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.normal),
          ),
        );
      }
    }
  • Image组件显示一张图片
1. 读取本地图片资源

调用方式是Image.asset

注意 需要配置项目根目录下的 pubspec.yaml  文件,文件中配置默认如下,默认是有asserts:
(1). 但是默认是关闭的,需要打开 
(2).根目录创建images目录,存储图片
(3).注意 格式一定要正确,否则也会报错

/**

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/share_image.png
  #  - images/a_dot_burr.jpeg

**/


import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: Image.asset("images/share_image.png"),
      ),
    );
  }
}

2. 读取网络图片资源

注意,网络图片的 调用方式为 Image.network()

import 'package:flutter/material.dart';
void main(){
  runApp(MyAppLocImage());
}

//网络图片加载
class MyAppLocImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',//标题名称
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),//标题名称
        ),
        body: Image.network("https://www.baidu.com/img/bd_logo1.png"),//图片加载地图
      ),
    );
  }
}

 

6. StatefulWidget 动态组件  实例

上面讲到了动态组件 StatefulWidget 下面举几个实例 一一说明。

/*****************************动态组件****************************/

class TextPage extends StatefulWidget {
  @override
  State createState() => MyState();
}

class MyState extends State {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello StatefulWidget"),
        ),
        body: new Stack(
          children: [
            new Align(
              child: new Text(
                "count值:$_count",
                style: new TextStyle(fontSize: 18.0),
                textAlign: TextAlign.center,
              ),
            ),
            new Align(
              alignment: new FractionalOffset(0.5, 0.0),
              child: new MaterialButton(
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {
                  //重新渲染当前的状态
                  setState(() {
                    _count++;
                  });
                },
                child: new Text('点我加下方文字自动加1'),
              ),
            ),
          ],
        ));
  }
}

7. 设置标题和返回操作

import 'package:flutter/material.dart';
void main(){
  runApp(MaterialApp(
    title:'',
    home: SecondScreen(),
  ));
}

/**************************标题设置****************************/

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //标题设置,包括:标题
      appBar: AppBar(
        title: new Text('首页'),
        leading: new Icon(Icons.arrow_back),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
          child: Text("该页面有标题,有返回"),
        ),
      ),
    );
  }
}

8. 总结

Flutter主要是在于思维转换,所有东西完全需要自己去写,还需要依赖于原生的开发,跨平台的框架大部分都是如此,使用flutter需要会双端的开发任务。
主要的优势则在于动画流畅,体验上做的不错,很多开发者反应比原生安卓还流畅(个人感觉差不多),至少在iOS上是看不到卡顿的,安卓上动画也很稳定,性能上展示了Google的硬实力。

本章代码地址链接:
https://github.com/chenjianpeng/flutter/tree/master/flutter_demo001

本届到此为止,大家应该对组件的写法有了答题的了解了吧,下节课我们讲一下 其他实用的组件(项目开发中常用)

                                                                flutter(三)flutter组件_第1张图片

 

 

你可能感兴趣的:(flutter)