Flutter -- 3.快速开始Flutter

2021-11-03 本文已影响0人 MissStitch丶

1.Flutter项目类型介绍

Plugin指的是插件，带有安卓/iOS代码原生代码
Module一般用于混合开发
Package指的是三方框架（全是Dart代码）。类似于iOS中的Alamofire、Kingfisher
App,创建app

2.Flutter的特点

不依赖原生UI
- 拥有独立的渲染引擎
界面更新逻辑和原生不一样（增量渲染）
- 重新创建一个新的Widget
为什么Flutter中大量final修饰的属性，const修饰的构造方法（常量对象）
- 因为Flutter的渲染逻辑，是增量渲染。Widget结构是树状结构
- 想改变屏幕内容就直接改变Widget对象
- 常量对象的创建效率更高！

3.万物皆Widget

Flutter中万物皆是Widget
自定义一个Widget要能够被渲染，需要实现build方法！

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
      child: Text(
        'helloFlutter',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40,//px
          color: Colors.purple,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

Flutter的Widget分两类
- 有状态：StatefulWidget
- 无状态：StatelessWidget

class MyStateFulWidget extends StatefulWidget {
  const MyStateFulWidget({Key? key}) : super(key: key);

  @override
  _MyStateFulWidgetState createState() => _MyStateFulWidgetState();
}

class _MyStateFulWidgetState extends State<MyStateFulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

4. MaterialApp

home属性（主页面）
- 需要一个Widget
- Scaffold小部件
  - 带有导航栏appBar的小部件
    - 导航栏可以设置文字、颜色。而且可以自定义Widget
  - body属性
    - 显示在导航栏下面的区域。传递一个Widget给它
debugShowCheckedModeBanner
- 是否显示Debug标记（便于我们在调试版本中做操作）

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Text('Hello Flutter'),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

5. 初探ListView

类似iOS中的TableView
ListView.builder(itemCount,itemBuilder)
- 参数：itemCount
  - 当前这个listView总共有多少个item
- 参数：itemBuilder
  - 是一个回调函数。function(BuildContext context,int index)
    - 返回每一个item。类似iOS中TableView的cellForRow
    - context参数，暂时还用不到。后续用到时再探究补充
    - indext参数，目前要返回的cell的index。说白了，就是现在给我返回的第几个item
- 参数：padding
  - 当Scaffold不显示AppBar时，ListView会带一个上边距，此时设置padding即可解决
  - padding: EdgeInsets.only(top: 0)
  - 注意：使用MediaQuery.removePadding(context: context, child: ListView(...), removeTop: true)也可以解决上边距问题

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello Flutter')),
      body: ListViewTestWidget(),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

class ListViewTestWidget extends StatelessWidget {
  Widget _itemBuilder(BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.red,
      child: Column(
        children: [
          Image.network(datas[index].imageUrl!), //加载网络图片
          SizedBox(height: 10,), //间距10
          Text(
            datas[index].name!,
            style: TextStyle(
                fontSize: 25,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.bold
            ),
          )
        ],
      ),
    );
  }

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

class Car {
  final String? name;
  final String? imageUrl;

  const Car({this.name,this.imageUrl});
}

List<Car> datas = [
  const Car(
    name: '保时捷918 Spyder',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  const Car(
    name: '兰博基尼Aventador',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];

ListView.png

6. 其它一些常用Widget介绍

1.Container

类似iOS的UIView。一个空的小部件。很常用
margin，内边距。让我内部的小部件往里面缩
每一个视图Widget都可以看成一个矩形

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello Flutter')),
      body: Container(
        child: Text('Hello Flutter'),
        // alignment: Alignment(0, 0), x,y值区间为-1~1。0，0在屏幕最中间
        // height: 100, //设置高度
        // width: 100, //设置宽度
        // color: Colors.white, //设置颜色
        // margin: EdgeInsets.all(10), //设置外间距
        // padding: EdgeInsets.all(10), //设置内间距
      ),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

2. Image

获取网络图片，异步获取。Image.network(urlStr)
获取本地资源图片。
- 1.先将图片文件拖入工程内
- 2.配置pubspec.yaml中的asserts。例如图片文件夹名称为images，格式如下：
  assets:
  - images/
- 3.使用图片文件名访问。Image.assert(xx.png)/Image(image: AssetImage(xx.png))

//加载网络图片
Image.network(图片地址) 
//加载本地图片
Image.asset('xx.png')
Image(image: AssetImage('xx.png'))

3.添加间距/占位

Container
SizeBox

//添加横向10占位
Container(width: 10)
SizedBox(width: 10)

4.RichText

创建富文本使用RichText，添加textSpan小部件。textSpan相当于某一段带样式的文字
textSpan里的childrens，可以继续添加textSpan，实现富文本

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello Flutter')),
      body: RichTextDemo(),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      maxLines: 3, //最多展示3行
      overflow: TextOverflow.ellipsis, //文本截断模式，以省略号
      text: TextSpan(
          text: '我',
          style: const TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.red
          ),
          children: [
            TextSpan(
                text: '正在读',
                style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.purple
                )
            ),
            TextSpan(
                text: '《Flutter进阶》',
                style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.black
                )
            )]
      ),
    );
  }
}

RichText.png

4.图片切圆角

使用Container中的decoration实现切圆角功能
borderRadius设置圆角大小

Widget build(BuildContext context) {
    return Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          image: DecorationImage(
              image: AssetImage('images/image.png'),
              fit: BoxFit.cover
          ),
        )
    );
  }

fit为图片显示模式
- fill，通过拉伸(改变原图比例)来铺满组件
  BoxFit.fill.png
- contain，将会尽可能的伸展来达到组件的边缘
  BoxFit.contain.png
- cover，将会尽可能小的放大来铺满整个组件
  BoxFit.cover.png
- fitWidth，保持原图比例，拉升宽度来达到组件的宽度
  BotFit.fitWidth.png
- fitHeight，保持原图比例，拉升高度来达到组件的高度 BoxFit.fitHeight.png
- none，正常展示，默认居中
  BoxFit.none.png
- scaleDown，保持在组件中并且不改变比例 BoxFit.scaleDown.png

Flutter -- 3.快速开始Flutter

1.Flutter项目类型介绍

2.Flutter的特点

3.万物皆Widget

4. MaterialApp

5. 初探ListView

6. 其它一些常用Widget介绍

1.Container

2. Image

3.添加间距/占位

4.RichText

4.图片切圆角

猜你喜欢

热点阅读