Flutter学习总结（三）组件必知必会

乂星人

已于 2022-02-18 16:38:11 修改

阅读量1.6k

点赞数

分类专栏： Flutter 文章标签： flutter android 移动开发 widget

于 2022-02-18 16:25:52 首次发布

本文链接：https://blog.csdn.net/li0978/article/details/123006228

版权

Flutter 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如果说Java是面向对象，那么Flutter就是面向组件，一切皆组件，那么多组件怎么学习呢，这里我就把高频使用的组件、方法、以及pub包整理一下，主要是能够快速上手和入门。

常用Widget

基组件

StatelessWidget（无状态的，一次渲染绘制）
StatefulWidget（有状态的，可多次渲染绘制）

flutter大部分组件都是间接或者直接继承于这两个组件。

门户组件

MaterialApp（android风格）
CupertinoApp（iOS风格）

Material风格基础框架组件，Flutter应用入口配置，例如标题、主题，主界面等。常用的“Scaffold”、“AppBar”、“TabBar”、“BottomNavigationBar”等都需要再此基础组件下实现。

基础组件

文本：Text
文本输入：TextField
按钮：RaisedButton（悬浮按钮）、TextButton（扁平按钮）、OutlineButton（边框按钮）、IconButton（icon按钮）
图片：Image
单/复选框：Radio（单选框）、Checkbox（复选框）
进度条：LinearProgressIndicator（条形进度条）、CircularProgressIndicator（原型进度条）
分割线：Divider
显隐控制：Visibility

布局组件

线性布局：Row（水平）、Column（垂直）
弹性布局：Flex
层叠布局：Stack（层叠父容器）、Positioned（孩子精细化定位）
定位布局：Align（上下左右任意位置）、Center（居中）
空间占用布局：Expanded（剩余空间、比例分割）
尺寸布局：SizedBox（确定宽高，可代替Margin的性质）

容器组件

组合容器：Container（主要用于大小、padding、背景、装饰等多条件组合修饰）
脚手架：Scaffold（页面脚手架，可捆绑appbar）
滚动容器：SingleChildScrollView（单一元素滚动）、CustomScrollView（复合滚动，例如GridView+ListView）、ListView（列表）、GridView（九宫格）

点击组件

InkWell（常用，有点击波浪效果）
GestureDetector（手势，方法更丰富，无点击效果）

其他组件

SafeArea（常用于刘海屏遮挡腾出安全空间，自定义标题栏中经常用到）
WillPopScope（导航返回拦截）

更多组件可参看官方文档：https://flutter.cn/docs/development/ui/widgets

静态路由配置

定义静态路由

var staticRoutes = {
  WelcomePage.routeName: (context) => WelcomePage(),
  LoginPage.routeName: (context) => LoginPage(),
  HomePage.routeName: (context) => HomePage(),
};

main入口引用

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter',
      routes: staticRoutes,
      home: HomePage(),
    );
  }
}

其他页面调用进行跳转

onPressed: () {
    Navigator.pushNamed(context, LoginPage.routeName);
},

一些高频方法

1.延迟获取：

Future.delayed(Duration(seconds: 2), () {
  ...
});

Timer(Duration(seconds: 2), (){
  ...
});

2.渲染结束监听

import 'package:flutter/scheduler.dart';
@override
void initState() {
  super.initState();
  SchedulerBinding.instance.addPostFrameCallback((_) => {});
}