我们先看一个小demo

import 'package:flutter/material.dart';  //导入系统包，类似UIKit

//程序运行入口
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      theme: ThemeData(primaryColor: Colors.amber),
    );
  }
}
class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(//类似nav
      backgroundColor: Colors.grey[100],
      appBar: AppBar(//类似导航栏
        title: Text('FlutterDemo'),
      ),
      body: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    final _testStyle = TextStyle(color: Colors.red,fontSize: 40.0,fontWeight: FontWeight.bold);
    return Center(
      child: Text(
        'hello Flutter',
        textDirection: TextDirection.ltr,
        style: _testStyle,
      ),
    );
  }
}

显示结果为

截屏2021-02-04 下午3.53.42.png

• 这里Widget，代表小部件，相当于UIView

• Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

• Stateful widgets 持有的状态可能在widget生命周期中发生变化

• 这里有个语法，如果代码只有一行可以用=>代替花括号

void main(){
  runApp(MyWidget());
}

和下面这个是等价的

void main() => runApp(MyWidget());

listView列表页面体验

我们可以通过这种形式加载列表页面

class ListViewDemo extends StatelessWidget {
  //带下划线代表私有
  Widget _cellForRow(BuildContext context,int index){
    return Container(
        color: Colors.white,
        margin: EdgeInsets.all(10),
        child: Column(
          children:<Widget> [
            Image.network(datas[index].imageUrl),
            SizedBox(height: 10,),
            Text(
              datas[index].name,
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                  fontStyle: FontStyle.values[1]
              ),
            ),
            SizedBox(height: 20,),

          ],
        )
    );
  }
  @override
  Widget build(BuildContext context) {
     return ListView.builder(
       itemCount: datas.length,
       itemBuilder:_cellForRow,
     );
  }
}

Text属性

class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );
  final String _title = 'Flutter特训班';
  final String _lector = 'Hank';
  @override
  Widget build(BuildContext context) {
    return Text(
      '《${_title} -- $_lector》本套课程将针对iOS开发者快速上手Flutter技术,本套课程将针对iOS开发者快速上手Flutter技术,本套课程将针对iOS开发者快速上手Flutter技术,本套课程将针对iOS开发者快速上手Flutter技术',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 3, //最多显示三行
      overflow: TextOverflow.ellipsis, //超出显示...
    );
  }
}

富文本RichText

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
          text: '《Flutter特训班》',
          style: TextStyle(
            fontSize: 30,
            color: Colors.black,
          ),
          children: <TextSpan>[
            TextSpan(
              text: 'Hank',
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.blue
              ),
            ),
            TextSpan(
              text: '哈哈',
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.blue
              ),
            ),
          ]
      ),
    );
  }
}

显示结果为

截屏2021-02-04 下午4.19.13.png