flutter - 04 入门基础知识

Flutter入门基础知识

• 如何创建Flutter项目?
• 如何运行Flutter项目?
• 如何导入Widget?
• 如何写一个Helloworld?
• 如何使用Widget并将其嵌套以形成Widget树?
• 如何创建可重用Widget?

如何创建Flutter项目?

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

从命令行使用flutter create命令。确保Flutter SDK配置了环境变量。

~ flutter create projectflutter

创建完成提示下面内容

In order to run your application, type:

  $ cd projectflutter
  $ flutter run

Your application code is in projectflutter/lib/main.dart.

运行 flutter run

➜  cd projectflutter 
➜  projectflutter flutter run
Launching lib/main.dart on xxxx in debug mode...
 
Signing iOS app for device deployment using developer identity: "Apple
Development: xxxxxxxx (22222222)"
Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                        84.3s
Xcode build done.                                           114.0s                                                                      
Installing and launching...                                        63.0s

➜  projectflutter flutter run
Launching lib/main.dart on xxxx in debug mode...
 
Signing iOS app for device deployment using developer identity: "Apple
Development: xxxxxxxx (22222222)"
Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                         8.5s
Xcode build done.                                           17.5s
Installing and launching...                                        22.2s
Waiting for xxxx to report its views...                                5ms
Syncing files to device xxxx...                                           
(This is taking an unexpectedly long time.)

使用安装了Flutter和Dart插件的IDE。

如何运行Flutter项目?

在Flutter中， 通过以下两种方式来运行项目：

• 从项目的根目录使用flutter run。
• 在带有Flutter和Dart插件的IDE中使用​​run​​​ 选项。
  $flutter run-d ‘iPhone X’
  -d 后面跟的是具体的设备名称， 可以是Android或iOS模拟器的名字，也可以一台已经连接到电脑上的Android或iOS的设备。

如何导入Widget?

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

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

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

如何写一个Helloworld?

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

import 'package:flutter/material.dart';

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

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

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

Widget可以定义：

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

以下示例使用​​Material​​库中的Widget显示”Helloworld!”应用程序。在此示例中， widget树嵌套在Material App的根widget中。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello Flutter ",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "hello appBar",
          ),
        ),
        body: Center(
          child: Text(
            "hello body",
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    );
  }
}

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

如何创建可重用的Widget?

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  var index = 10;
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello Flutter ",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "hello appBar",
          ),
        ),
      body: CustomCard(index: index, onPress:(){
        print('Card $index');
      }),
      ),
    );
  }
}


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: [
          Text('Card $index'),
          FlatButton(onPressed: this.onPress, child: const Text('Press'))
        ],
      ),
    );
  }
}

在前面的例子中， CustomCard类的构造函数使用Dart的大括号语法​​{}​​​ 来配置可选参数。
如果要标识必须的字段， 请从构造函数中删除花括号， 或者将@required添加到构造函数中。