Flutter入门必备基础知识

为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了,点我Get!!!

在本节中我们主要对标React Native来讲解Flutter的一些入门基础知识,Android、iOS或web开发者可以省略React Native部分,直接学习Flutter部分。

Flutter入门基础知识

如何创建Flutter项目?

以React Native为例,要创建一个React Native 项目,我们可以通过create-react-native-app脚手架来完成:

$ create-react-native-app <projectname>

要创建一个Flutter 项目有以下两种方式:

  • 从命令行使用flutter create命令。确保Flutter SDK配置了环境变量。
  • 使用安装了Flutter和Dart插件的IDE。
$ flutter create <projectname>

create-flutter-project

关于创建Flutter项目的更多内容可学习《基于Flutter1.x开发携程网App》

如何运行Flutter 项目?

在React Native中,我们可以通过一下命令来运行项目:

$ react-native run-ios
//或
$ react-native run-android

那么在Flutter中,我们通过一下两种方式来运行项目:

  • 从项目的根目录使用flutter run
  • 在带有Flutter和Dart插件的IDE中使用“run”选项。
$ flutter run -d 'iPhone X'

-d后面跟的是具体的设备名称,可以是Android或iOS模拟器的名字,也可以一台已经连接到电脑上的Android或iOS的设备。

flutter-run

关于运行Flutter项目的更多内容可学习《基于Flutter1.x开发携程网App》

如何导入Widget?

在React Native中,您需要导入每个必需的组件:

//React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";//导入系统组件
import NavigationBar from '../common/NavigationBar';//导入自己的组件

在Flutter中,要使用Material Design库中的小部件,则需要导入material.dart包。要使用iOS样式widget,请导入Cupertino库。要使用更基本的窗口widget集,请导widget 库。或者,当然,也可以导入自己编写的widget:

import 'package:flutter/material.dart';//导入系统material widget 库
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/my_widgets.dart';//导入自己的widget

无论您导入哪个widget包,Dart都只会导入在您的应用中使用的widget。

想知道Flutter都有哪些Widget可以学习《认识Flutter Widget》

如何写一个Hello world?

hello-world

在React Native中,我们通过如下代码来实现这个需求:

// React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

在Flutter中,您可以创建一个完全相同的“Hello world!”应用程序使用核心窗口小部件库中的Center和Text窗口小部件。Center窗口小部件成为窗口小部件树的根,并且有一个子窗口,即“Text”窗口小部件:

// Flutter
import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

得益于Flutter强大的封装能力,我们不难发现实现相同的功能,Flutter要比RN少很多代码。

如何使用Widget并将其嵌套以形成Widget树?

在Flutter中,几乎所有东西都是widget。

widget是用户界面的基本构建块,您将widget组成一个层次结构,调用widget树。每个窗口widget都嵌套在父窗口widget中,并从其父窗口继承属性。甚至应用程序对象本身也是一个组件,没有单独的“应用程序”对象。相反,根widget担任此角色。

Widget可以定义:

  • 结构元素 - 如按钮或菜单
  • 文体元素 - 像字体或颜色主题
  • 类似布局的填充或对齐的一个方向

以下示例使用Material库中的Widget显示“Hello world!”应用程序。在此示例中,widget树嵌套在MaterialApp的根widget中。

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

以下图片显示了使用Material Design小部件构建的“Hello world!”。
hello-world

如何创建可重用的Widget?

在React Native中,我们可以定义一个类来创建可重用的组件,然后使用props方法来设置或返回所选元素的属性和值,在下面的示例中,定义了CustomCard类,然后在父类中使用:

// React Native
class CustomCard extends React.Component {
  render() {
    return (
      <View>
        <Text > Card {this.props.index} </Text>
        <Button
          title="Press"
          onPress={() => this.props.onPress(this.props.index)}
        />
      </View>
    );
  }
}

// Usage
<CustomCard onPress={this.onPress} index={item.key} />

在Flutter中,同样需要定义一个类来创建自定义widget,然后重用widget。您还可以定义和调用返回可重用小部件的函数,如以下示例中的构建函数所示。

// Flutter
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required 
     this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: this.onPress,
          ),
        ],
      )
    );
  }
}
    ...
// Usage
CustomCard(
  index: index,
  onPress: () { 
    print('Card $index');
  },
)
    ...

在前面的例子中, CustomCard类的构造函数使用Dart的大括号语法{}来配置 可选参数

如果要标识必须的字段,请从构造函数中删除花括号,或者 将@ required添加到构造函数中。

以下屏幕截图显示了可重用的CustomCard类的示例:
reusable-components

未完待续

  • Flutter入门基础知识
  • Flutter主题和文字处理
  • Flutter什么是声明式UI
  • Flutter布局与列表
  • Flutter手势检测及触摸事件处理
  • Flutter状态管理d
  • Flutter线程和异步UI
  • Flutter表单输入与富文本
  • Flutter认识视图(Views)md
  • Flutter调用硬件、第三方服务以及平台交互、通知
  • Flutter路由与导航
  • Flutter项目结构、资源、依赖和本地化

参考

Flutter从入门到进阶实战携程网App

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论
<p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <span>本课程根据实际开发中总结出来的一些学习思路,从零开始详细讲解</span><span>Flutter</span><span>的基础知识点。从简到难,从浅入深,逐步带领大家了解</span><span>Flutter</span><span>,熟悉</span><span>Flutter</span><span>的组成部分,并且带领大家学习如何使用</span><span>Flutter</span><span>实现</span><span>UI</span><span>功能编写。通过对本视频的学习,你将会掌握</span><span>Flutter</span><span>常用组件和常用布局构建复杂布局、</span><span>Flutter</span><span>路由导航实现多页面构建和交互、</span><span>Flutetr</span><span>手势处理和动画实现动态交互效果,以及如何使用音视频、图片、文字、字体等资源。除此之外,你还可以收获每一章节遇到的重难点问题的解决方案。</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a>,点击右下方课程资料、代码、课件等打包下载 </p> <p> <br /> </p>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

CrazyCodeBoy

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值