Flutter学习总结

学习原文: https://flutterchina.club/

1. 安装:

配置环境变量:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下载sdk解压到目录并把目录添加到path中:

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

export PATH=`pwd`/flutter/bin:$PATH

用flutter doctor检查环境及具体环境设置

https://flutterchina.club/setup-macos/

编辑器使用Android Studio(IntelliJ IDEA Ultimate)或者Visual Studio Code

2. 开发步骤

第一个MaterialApp(material.dart代码文件)

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

使用外部包,在pubspec.yaml文件中加入需要导入的包如下,然后用命令flutter pub get更新依赖包

english_words: ^3.1.5

在material.dart代码文件头中加入

import 'package:english_words/english_words.dart';

3 widgets

Basic widgets:TextRowColumnStackContainer

Material Components:MaterialApp Navigator,   AppBar Scaffold leading , actions , title

https://flutter.dev/docs/development/ui/widgets/material

熟悉StatelessWidget和StatefulWidget控件,区别在于状态的改变:

StatelessWidget面向那些始终不变的UI控件,比如标题栏中的标题;

而StatefulWidget则是面向可能会改变UI状态的控件,比如有点击反馈的按钮。

StatefulWidget的创建需要指定一个State,在需要更新UI的时候调用setState(VoidCallback fn),并在VoidCallback中改变一些变量数值等,组件会重新build以达到刷新状态也就是刷新UI的效果。

Handling gestures:https://flutter.dev/docs/development/ui/advanced/gestures

使用 GestureDetector widget 包含 ContainerGestureDetector 里面有 onTap() 回掉, 其它的 taps, drags, and scales都有回掉.

 IconButtonElevatedButtonFloatingActionButton 有 onPressed() 手势回掉.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值