Flutter-基础组件一

作者: 葱花思鸡蛋 | 来源:发表于2020-09-24 14:08 被阅读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

调用时机：

Widget首次插入树中时调用
父节点更改了配置
它所依赖的InheritedWidget改变时

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
更新时期 didChangeDependencies 、build 、didUpdateWidget
销毁时期 deactivate 和 dispose

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使用选择，以及性能问题。

树根上尽量不用状态控件，因为如果数据有变化树根每次都更新，那就是整棵树都要重建，把状态用在树叶上，这样更新的时候只会更新自己。
减少build方法所创建的节点数量和控件数量。
利用缓存，如果子树中不更改，将子树中缓存起来，每次使用其子树时重新使用它，学会重用思想。
尽可能使用const修饰控件。

2.主体结构组件

1）MaterialApp和CupertinoApp

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

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

title ：这个和启动图标名字是不一样的，在任务管理窗口中所显示的应用名字。
theme ：应用各种 UI 所使用的主题颜色。
color ：应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色。
home ：应用默认所显示的界面Widget。
routes ：定义应用中页面跳转规则，当使用 Navigator.pushNamed 来路由的时候，会在 routes 查找路由名字，然后使用对应的 WidgetBuilder 来构造一个带有页面切换动画的 MaterialPageRoute。
initialRoute ：第一个显示的路由名字，默认值为 Window.defaultRouteName。
onGenerateRoute：生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面。
onLocaleChanged：当系统修改语言的时候，会触发这个回调。
navigatorObservers ：应用 Navigator 的监听器。
debugShowMaterialGrid：是否显示纸墨设计基础布局网格，用来调试 UI 的工具。
showPerformanceOverlay ：显示性能标签。
checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关。

2）Scaffold

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

常用属性介绍：

appBar：导航栏。
body：用于显示当前界面主要内容的Widget。
floatingActionButton：一个悬浮在body上的按钮，默认显示在右下角。
floatingActionButtonLocation：用于设置floatingActionButton显示的位置。
floatingActionButtonAnimator：floatingActionButton移动到一个新的位置时的动画。
persistentFooterButtons：多状态按钮。
drawer：左侧的抽屉菜单。
endDrawer：右'侧的抽屉菜单。
bottomNavigationBar：底部导航栏,同iOS的tabbar。
bottomSheet：显示在底部的工具栏。
backgroundColor：内容背景颜色。
resizeToAvoidBottomPadding :控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。

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

常用属性介绍：

leading：设置导航栏返回的组件，相当于iOS中的leftBarButtonItem。
title：导航栏标题
actions：设置导航栏右边的组件，一个Widget列表，相当于iOS中的rightBarButtonItems。
bottom：一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。
backgroundColor： Appbar 的颜色，默认值为 ThemeData.primaryColor。
brightness：Appbar的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。
iconTheme：Appbar上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
textTheme：Appbar 上的文字样式。
centerTitle：标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。

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

常用属性：

tabs：必须实现的，设置需要展示的tabs，最少需要两个。
controller：标签选择变化控制器，TabController对象,默认的DefaultTabController或者自定义TabController。
isScrollable：是否可滚动。
indicator：用于设定选中状态下的展示样式。
indicatorColor：选中指示器的颜色。
indicatorWeight：选中下划线的高度，值越大高度越高，默认为2。
indicatorPadding：底部指示器的Padding。
indicatorSize：指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽。
labelColor：选中label颜色。
labelStyle：选中label的Style。
labelPadding：每个label的padding值。
unselectedLabelColor：未选中label颜色。
unselectedLabelStyle：未选中label的Style。
onTap：点击事件

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

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

currentIndex：当前选item索引项。在onTap中控制当前选中的item实现切换tab页。
type：有两个值，默认值BottomNavigationBarType.shifting和BottomNavigationBarType.fixed,一般使用fixed。
backgroundColor：背景颜色。
selectedItemColor：选中item颜色。
unselectedItemColor：未选中item颜色。
selectedFontSize：选中item文字大小。
unselectedFontSize：未选中item文字大小。
showUnselectedLabels：是否显示未选中的Item的文字。

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;
          });
        },
      ),
    );
  }

}

Flutter-基础组件一

1.StatelessWidget 和 StatefulWidget

2.主体结构组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

Flutter 好东西

Flutter