第二章：Flutter之Hello world

1.新建项目

image.png 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),
          ),
        ],
      ),
    );
  }
}

课堂补充：关于项目挪动位置路径变化，导致打开其内部ios工程编译出错的问题。

问题出错原因是：xcode内部引用的路径不是绝对路径，项目位置变化之后，会导致编译不通过

image.png

解决办法

打开android studio，选择ios模拟器，run。成功之后，会自动修改ios内部的路径。

再次打开ios工程，build，成功

完结 撒花✿✿ヽ(°▽°)ノ✿