flutter组件

Posted 2020-12-11 ljygirl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flutter组件相关的知识，希望对你有一定的参考价值。

1. Widget组件类

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

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

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

（2）有状态组件(StatefulWidget 动态组件)持有状态可能在Widget生命周期中发生变化。

　实现一个StatefulWidget至少需要两个类

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

2 .（State类）

StatefulWidget（动态组件），本身StatefulWidget 类本身是不变化的，但是集成State类在Widget生命周期中始终存在，导致变化。

State的作用主要有两点：

在widget构建的时候可以被同步读取；
在widget的生命周期中可能会被改变。

3.State生命周期

State生命周期一共有四种状态

created：当State对象被创建时候，State.initState方法会被调用；
initialized：当State对象被创建，但还没有准备构建时，State.didChangeDependencies在这个时候会被调用；
ready：State对象已经准备好了构建，State.dispose没有被调用的时候；
defunct：State.dispose被调用后，State对象不能够被构建

4.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 静态组件实例

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 动态组件实例

/*****************************动态组件****************************/
 
class TextPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyState();
}
 
class MyState extends State<TextPage> {
  var _count = 0;
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello StatefulWidget"),
        ),
        body: new Stack(
          children: <Widget>[
            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("该页面有标题，有返回"),
        ),
      ),
    );
  }
}