flutter组件

时间:2020-06-17 16:02:54   收藏:0   阅读:66

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至少需要两个类

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

2 .(State类)

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

State的作用 主要有两点:

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

3.State生命周期

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

 4.flutter基本组件及其概念

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("该页面有标题,有返回"),
        ),
      ),
    );
  }
}

 

原文:https://www.cnblogs.com/ljygirl/p/13152619.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!