1.新建项目

image.png

注意

注意，如果上图中sdk的路径没有的话，需要自己手动添加，即下载完FlutterSdk的解压路径。

2.写下最简单的代码

import 'package:flutter/material.dart'; //导入最基本的视图库，相当于OC中的UIKit


void main() {
  runApp(MyWidget());//返回一个小部件，渲染
}

/*
* //有状态的Stateful   无状态的Stateless   两种部件
* 
* */
class MyWidget extends StatelessWidget { //定义一个部件，继承于'StatelessWidget'
  //定义一个文本样式style
  final TextStyle _textStyle = TextStyle(  
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.red
  );
  @override
  Widget build(BuildContext context) {
    return Center(//Center是一个基本部件类型
      //child是子部件，告诉显示的是什么
      child: Text('Hello world',textDirection: TextDirection.ltr,style: _textStyle,),
    );
  }
}

运行如下

image.png

2.创建一个类似于“UIviewController”的页面

class MYViewController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(//利用Meterial部件，类似于UINavgationController
      home: Scaffold(//类似于设置根视图为Scaffold(也是一个部件)
        appBar: AppBar(//类似于Navbar
          title: Text('我是标题',style: TextStyle(fontSize: 20,color: Colors.green),),
        ),
        body: MyWidget(),
        backgroundColor: Colors.cyanAccent,
      ),
      theme: ThemeData(//设置主题
        primaryColor: Colors.yellow
      ),

    );

  }

3.创建一个listView列表

实现一个通讯录，通讯类包括姓名和电话号码

首先我们先创建一个'Person'的model

image.png

//新建一个结构体，并且定义名字和电话
class Friend{
  //类似于构造函数
  const Friend({

    this.name,
     this.mobile,

  });

  final String name;
  final String mobile;

}

记住，我们创建的dart文件，要全部用小写，并不适用于驼峰命名法则，但是我们的代码内部Class的类名需要采用驼峰命名法则

import 'package:flutter/material.dart'; //导入最基本的视图库，相当于OC中的UIKit
import 'model/friend.dart';

void main() {
  runApp(AddressBook());//返回一个小部件，渲染
}


class AddressBook extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('通讯录'),
        ),
        backgroundColor: Colors.white,
        body: ListView.builder(
          itemBuilder: (BuildContext context,int index){
            return Container(
              margin: EdgeInsets.only(left: 10,top: 10,bottom: 10,right: 10),
              child: Column(
                children: [
                  Container(
                    height: 40,
                      child:Row(
                        children: [
                          Text('${datas[index].name} :  '),
                          Text(datas[index].mobile),
                        ],
                      )
                  ),
                ],
              )
            );
          },
          itemCount: datas.length,
        ),
      ),
    );
  }
}


final List<Friend> datas = [

  Friend(
    name: '张三',
    mobile: '111231231230'
  ),
  Friend(
      name: '李四',
      mobile: '1333211110'
  ),
  Friend(
      name: '王二',
      mobile: '1499991110'
  ),Friend(
      name: '麻子',
      mobile: '198872222210'
  )

];

运行效果如下

image.png

**富文本部件


class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );

  final String _title = '妖精尾巴';
  final String _lector = '格雷';

  @override
  Widget build(BuildContext context) {
    return Text(
      '《 ${_title} 》-- $_lector.艾德拉斯.',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 4,
      overflow: TextOverflow.ellipsis,
    );
  }
}

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '《 普通文本 》',
        style: TextStyle(fontSize: 30, color: Colors.black),
        children: <TextSpan>[
          TextSpan(
            text: '露西,
            style: TextStyle(fontSize: 16, color: Colors.blue),
          ),
          TextSpan(
            text: '😁',
            style: TextStyle(fontSize: 16, color: Colors.blue),
          ),
          TextSpan(
            text: '纳兹',
            style: TextStyle(fontSize: 16, color: Colors.blue),
          ),
        ],
      ),
    );
  }
}