跳至主要內容

Flutter

LiCheng大约 3 分钟

Flutter

介绍💔

镜像💔

  • 必做配置否则下载卡死
  • 新建或修改 $HEOM$/.gradle/init.gradle
  • 用户家目录下创建
  • 配置内容
def repoConfig = {
    all { ArtifactRepository repo ->
        if (repo instanceof MavenArtifactRepository) {
            def url = repo.url.toString()
            if (url.contains('repo1.maven.org/maven2') || url.contains('jcenter.bintray.com')) {
                println "gradle init: (${repo.name}: ${repo.url}) removed"
                remove repo
            }
        }
    }
    // maven { url 'http://mirrors.cloud.tencent.com/nexus/repository/maven-public/' }
    maven { url 'https://maven.aliyun.com/repository/central' }
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
    maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
}

allprojects {
    buildscript {
        repositories repoConfig
    }

    repositories repoConfig
}

项目🐷

官方组件在线示例

明星组件库

共享数据

状态库

轮播库

通知库

滑块库

位置库

文字库

数据库

图标库

加载动画库

无限滚动库

时间选择

表情库

组件动画库

其他库

介绍🌟

  • 为什么要学Flutter？
  • 我****,真变态。

布局介绍⛪️

  • 2020左右时期
组件作用用途归属于使用
Row (er lu fu)水平布局
Column (kao leng)垂直布局
Container(ken ti leng)容器可以设置边距
SizedBox容器无法设置边距
Center (shen tie)剧中布局
Scaffold脚手架主体布局
AppBar头部导航导航栏Scaffold
SliverAppBar折叠导航Scaffold
BottomNavigationBar底部导航底部菜单Scaffold
ListView.builder列表布局可获得索引
ListView列表布局不可获得索引
Expanded自适应组件当左右大小固定则自适应Row/Column
Visibility隐藏or显示组件
Stack层叠组件，从下至上覆盖，最下由先级最高
GestureDetector手势组件页面/按下无阴影
InkWell触摸组件组件/按下有阴影
ExpansionTile下拉组件(下来显示区域变大)
WillPopScope获取系统返回监控
Divider水平线
IgnorePointer排除组件事件
SafeArea系统安全区域去刘海内屏幕
  • Expanded 如果在 Row/Column 使用时2个则无需指定宽度即可获得自适应宽度-示例
  • Expanded 当作占位符可用，左右不设置宽度中间 Expanded 则会把多余空间分配给>Expanded
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(child: SizedBox(
      height:150,child: Card(child: a),),),
    Expanded(child: SizedBox(
      height:150,child: Card(child: b),),),
  ],
);
  • 不规则布局
  • 搭配 Column > Row > [Container]

组件组合常用😎

//拥有弹性的滚动列表，无论内容是否溢出
physics: const AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()) ,
//水平线
Divider()
Border(bottom: Divider.createBorderSide(context))
/// 获取当前组件key的子组件高度 _columnHeightKey.currentContext!.findRenderObject()!.semanticBounds.size.height 
final GlobalKey _columnHeightKey = GlobalKey();

AS插件🌅

  • Android WiFiADB(具有WIFI功能的电脑必装)

路由🌈

//自定义组件路由
Navigator.push(context,MaterialPageRoute(builder: (context){         
    return const Text("Hello World"); 
}));

插件👏

必须安装🐷

组件😄

  • 2022/10/28

IgnorePointer😆

IgnorePointer( //排除点击事件
    ignoring: true,
    child: 你的组件,
)

GetX🍏

动画操作😃

Get.to(Scaffold(appBar: AppBar(),
  body: const Center(child: Text("自定义动画"))),
  transition: Transition.rightToLeft);

文档🌅

  • https://hfybbs.gitee.io/flutter-getx-doc/quick-start

常用Api❤️

  • 屏幕高宽 Get.height & Get.width

Idea模板💒

import 'package:flutter/cupertino.dart';

class ${NAME} extends StatefulWidget{
  const ${NAME}({Key? key}) : super(key: key);

  @override
  State createState() {
    return _${NAME}();
  }
}

class _${NAME} extends State<${NAME}> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true,title: const Text("${NAME}"),),
      body: const Center(child: Text("Hello World"),),
    );
  }
}
枫叶
Copyright © 2024 LiCheng