面向React Native开发者的Flutter——基础

一、如何创建Flutter应用程序？

要使用React Native创建应用程序，您可以从命令行运行create-react-native-app.

 create-react-native-app <projectname>

要在Flutter中创建应用程序，请执行以下操作：

• 使用安装了Flutter和Dart插件的IDE。
• flutter create从命令行使用命令。确保Flutter SDK在您的PATH中。

flutter create <projectname>

有关更多信息，请参阅入门，它会引导您创建按钮点击计数器应用程序。创建 Flutter 项目会构建在 Android 和 iOS 设备上运行示例应用程序所需的所有文件。

二、如何运行我的应用程序？

在React Native中，您可以从项目目录运行npm run或者yarn run

您可以通过多种方式运行Flutter应用程序

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

您的应用程序在连接的设备、iOS模拟器或Android模拟器上运行。

三、如何导入小部件？

在React Native中，您需要导入每个必要的组件。

// React Native
import React from 'react';
import {StyleShheet, Text, View} from 'react-native';

在Flutter中，要使用Material Design库中的小部件，请导入material.dart包。要使用iOS风格的小部件，请导入Cupertino库。要使用更基本的小部件集，请导入小部件库。或者，您可以编写自己的小部件库并将其导入。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:my_widgets/my_widgets.dart';

无论您导入哪个小部件包，Dart只会引入您的应用程序中使用的小部件。 有关详细信息，请参阅Flutter Widget 目录。

四、什么是React Native的“Hello, world!” Flutter中的应用程序？

在React Native中，HelloWorldApp该类通过返回一个视图组件来扩展React.Component和实现reader方法。

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

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        background: '#ff',
        alignItems: 'center',
        jusstifyContent: 'center'
    }
});

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

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

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

下图显示了基本 Flutter“Hello world!”的 Android 和 iOS UI。应用程序。

现在您已经了解了最基本的 Flutter 应用程序，下一节将介绍如何利用 Flutter 丰富的小部件库来创建一个现代的、精美的应用程序。

五、如何使用小部件并将它们嵌套以形成小部件树

在Flutter中，几乎一切都是小部件。

小部件是应用程序用户界面的基本构建块。您将小部件组合成一个层次结构，成为小部件树。每个小部件潜逃在父小部件内，并从其父小部件继承属性。甚至应用程序对象本身也是一个小部件。没有单独的“应用程序”对象。相反，根小部件充当次角色。

小部件可定义：

• 结构元素——如按钮或菜单
• 风格元素——如字体或配色方案
• 布局的一个方面——如填充或对齐

以下示例显示了“Hello world!”使用material库的小部件的应用程序。在此示例中，小部件树嵌套在MaterialApp根小部件内

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

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

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

下图显示“Hello world!” 由 Material Design 小部件构建。您可以免费获得比基本的“Hello world!”更多的功能。应用程序。

编写应用程序时，您将使用两种类型的小部件：StatelessWidget或StatefulWidget。StatelessWidget就像它命名那样——一个没有状态的小部件。StatelessWidget创建一次，永远不会改变它的外观。StatefulWidget根据接收的数据或用户输入动态更改状态。

无状态小部件和有状态小部件之间的重要区别在于StatefulWidget有一个State存储状态数据并在树重建过程中携带它的对象，因此它不会丢失。

在简单或基本的应用程序中，嵌套小部件很容易，但随着代码库变大和应用程序变得复杂，您应该将深度嵌套的小部件分解为返回小部件或更小类的函数。创建单独的功能和小部件允许您的应用程序中重用组件。

六、如何创建可复用组件？

在React Native中，您将定义一个类来创建可复用组件，然后使用props方法来设置或返回所选的属性和值。在下面的示例中，CustomCard类被定义，然后在父类中使用。

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

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

在Flutter中，定义一个类来创建一个自定义的widget，然后复用这个widget。您还可以定义和协调返回可充用小部件的build函数，如以下示例中的函数所示。

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

class CustomCard extends StatelessWidget {
    const CustomCard({
        Key? key,
        required this.index,
        required this.onPress,
    }) : super(key: key);
    
    final int index;
    final void Function() onPress;
    
    @override
    Widget build(BuildContext context) {
        return Card(
            child: Column(
                children: <Widget>[
                    Text('Card $index'),
                    TextButton(
                        onPressed: onPress,
                        child: const Text('Press'),
                    ),
                ],
            ),
        );
    }
}

class UseCard extends StatelessWidget {
  const UseCard({
    Key? key,
    required this.index,
  }) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    // Usage
    return CustomCard(
      index: index,
      onPress: () {
        print('Card $index');
      },
    );
  }
}

在前面的示例中，CustomCard类的构造函数使用的Dart的{ }语法来指示命名的可选参数。

要需要这些字段，请从构造函数中删除大括号，后将其添加required到构造函数中。

以下屏幕截图显示了可重用 CustomCard类的示例。