FlutterFlutter 好东西Flutter

Flutter-基础组件一

2020-09-24  本文已影响0人  葱花思鸡蛋

在Flutter中，Widget是一切的基础，作为响应式渲染，属于MVVM的实现机制，通过修改数据，再用setState设置数据，Flutter会自动通过绑定的数据更新Widget。

1.StatelessWidget 和 StatefulWidget

在平时，用的最多就是StatelessWidget和StatefulWidget这两种Widget，StatelessWidget表示无状态的，StatefulWidget表示有状态的。
在Flutter中每个页面都是一帧，无状态就是保持在那一帧，总而言之就是不能跟用户交互，当有状态的Widget当数据更新时，其实是绘制了新的Widget，也就是UI发生了变化，只是State实现了跨帧数据同步保存。

1）StatelessWidget
源码：

abstract class StatelessWidget extends Widget {
  // 初始化子类的[key]。这个key类是Widget、Element、SemanticsNode的唯一标识符
  // 是用来控制Widget数中替换Widget的时候使用的。
  const StatelessWidget({ Key key }) : super(key: key);

 // 创建一个[StatelessElement]来管理这个小部件在树中的位置
  @override
  StatelessElement createElement() => StatelessElement(this);

  // 描述这部件呈现用户界面的部分
  @protected
  Widget build(BuildContext context);
}

函数：Widget build(BuildContext context)：

作用：用于描述当前widget所代表的UI

调用时机：

import 'package:flutter/material.dart';
//使用`flutter/material.dart` 目的是使用Matrial风格的小控件
void main(){
   // 类比iOS入口main函数
  //运行程序 
  runApp(MyApp('你是猪吗'));
}
//继承无状态的StatelessWidget 使程序自身变为Wiget
class MyApp extends StatelessWidget{

  //要显示的内容
  final String text;

  //数据内容可以通过构造方法传递进来
  MyApp(this.text);

  //重写build方法 返回你需要的控件
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      //红色背景
      color: Colors.red,
      //高度 现在没用 会撑满整个屏幕
      height: 200,
      //宽度 运行效果会撑满整个屏幕
      width: 200,
      //内容居中
      alignment: Alignment.center,
      //Text控件
      child: new Text(
        text ?? "hello",
         textDirection: TextDirection.ltr,//文本展示方向，从左向右。需要加上这句不然报错
      ),

    );
  }
}

2）StatefulWidget
有状态的控件,状态是在创建控件可以同步读取信息，并且在控件的生命周期内可以改变，当控件状态发生改变时使用State.setState来及时更新。

源码：

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
 
  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  State createState();
}

函数：State createState()

作用：在Widget树中给定的位置上，创建此可变状态的小部件，子类应该重写此方法返回新建的关联子类的实例。

调用时机：当调用一个StatefulWidget，框架就会调用createState这个方法，当一个StatefulWidget从Widget树中移除，再次插入树中，那么会再次调用createState来创建一个新的State对象，这样做简化了State对象的生命周期。

StatefulWidget本身是不可变的，它可变的状态存储在与之关联的State对象中。

State对象生命周期；

initState：类似于iOS的viewDidLoad(),在这个方法中通常会做一些初始化工作。

didChangeDependencies：这个方法在两种情况下会调用，当调用initState方法时调用；当从其他对象依赖的数据发生变化时调用，如InheritedWidget。

didUpdateWidget：这是一个不常用到的生命周期方法，当父组件需要重新绘制时才会调用。

build: 这是一个必须实现的方法，在这里实现你要显示的页面内容，它会在didChangeDependencies方法之后立即调用，另外当调用setState()后也会再次调用该build方法。

deactivate：很少使用，在组件被移除时候调用，在dispose之前调用。

dispose：常用，组件被销毁时候调用。通常在该方法中执行一些资源的释放工作。



import 'package:flutter/material.dart';
//使用`flutter/material.dart` 目的是使用Matrial风格的小控件
import 'dart:async';//记得导库
void main(){
  //运行程序
  runApp(StateWidget());
}

//继承StatefulWidget
class StateWidget extends StatefulWidget{
  
   @override
   State createState(){
     return _StateWidget();
   }
}

//控件继承State
class _StateWidget extends State<StateWidget>{
  int number = 0;
  String text;
  //构造函数
  _StateWidget(this.text);

  @override
  void initState(){
    //初始化，这个函数在控件的生命周期内调用一次
    super.initState();
    print("进入initState");
    //3秒后改变text的内容
    new Future.delayed(const Duration(seconds: 3),(){
      setState(() {
        number++;
        text = "已经改变数值，数值现在是$number";
      });

    });
  }

  @override
  void dispose(){
    //销毁
    super.dispose();
    print('销毁');
  }

  @override
  void didChangeDependencies(){
    //在initState之后调
     super.didChangeDependencies();
     print('进入didChange');
  }

  //重写build方法
  @override
  Widget build(BuildContext context){
    return Container(
      //红色背景
      color: Colors.red,
      //内容居中
      alignment: Alignment.center,
      //Text控件
      child: new Text(
        //Dart语法中 ?? 表示如果text为空，就会返回??号的内容
        text ?? "没改变数值",
        textDirection: TextDirection.ltr,//需要加上这句不然报 RichText widgets require a Directionality widget ancestor.
      ),

    );
  }
}

3）StatelessWidget和StatefulWidget使用选择，以及性能问题。

2.主体结构组件

1）MaterialApp和CupertinoApp

Flutter 中包含两套风格的组件，分别是 Material 和 Cupertino 。
MaterialApp 是由 Google 推出的 Material Design设计风格的组件。
Cupertino 是 iOS风格的组件，命名都带 Cupertino 前缀，比如 CupertinoSlider 、CupertinoDatePicker等。

二者属性基本相同，用法相似，CupertinoApp有些会带Cupertino前缀，常用属性介绍；

2）Scaffold

Scaffold 翻译过来就是脚手架的意思，一个提供 Material Design 设计中基本布局的 widget。

常用属性介绍：

3）AppBar
应用导航栏，相当于iOS中的navigationBar。

常用属性介绍：

4）TabBar
标签导航组件，类似于新闻或者电商样式中有关导航条下面有一个可以滚动的一行按钮，一般和AppBar连用，设置AppBar的bottom属性。

常用属性：

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'demo',
      theme: ThemeData(
        //设置为蓝色
          primarySwatch: Colors.blue
      ),
      home: MainWidget(),
    );
  }

}

class MainWidget extends StatelessWidget{

 final List <Widget> tabs = [
  Text('语文'),
  Text('数学' ),
  Text('英语'),
  Text('物理'),
  Text('化学'),
  Text('生物'),
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('demo'),
          bottom: TabBar(tabs: tabs,
            onTap: (int index) {
              print('Selected......$index');
            },
            unselectedLabelColor: Colors.white,
            labelColor: Colors.black,
            labelStyle: TextStyle(fontSize: 20.0),
            isScrollable: true,
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 2.0,

          ),
        ),
        //选中哪个tab，body就会显示TabBarView中child属性的widget
        body: TabBarView(children: tabs),
      ),
    );
  }
}

5）BottomNavigationBar

底部导航栏控件，提供了顶级视图之间的快速导航。
常用属性：

class _MainWidgetState extends State<MainWidget>{

  final List <Widget> tabs = [
    Text('语文'),
    Text('数学'),
    Text('英语'),
    Text('物理'),
  ];
  //底部Tab数据
  final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

  List <BottomNavigationBarItem> tabItems(){
     var itemList = <BottomNavigationBarItem>[];
     bottomMap.forEach((key, value) {
       var item = BottomNavigationBarItem(
         title: Text(key),
         icon: value,
//         backgroundColor: Colors.blue
       );
       itemList.add(item);
     });

     return itemList;
  }

  var _index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('demo'),
      ),
      body: tabs[_index],
      bottomNavigationBar: BottomNavigationBar(
        items: tabItems(),
        backgroundColor: Colors.blue,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.orange,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        currentIndex: _index,
        onTap: (idx){

          print("tab index $idx");
          setState(() {
            _index = idx;
          });
        },
      ),
    );
  }

}
上一篇下一篇

猜你喜欢

热点阅读