Flutter项目初学记三持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

Text

创建一个用于显示文字的容器

Text('这是一段文字',style: TextStyle(fontSize: 18.sp, height: 3))

Image

创建一个显示图片的容器

Image(image: const AssetImage('assets/images/common/success.png'),width: 200.w)
//等同于
Image.asset('assets/images/common/form_success.png',width: 200.w,)//资源图片
Image.network('http://test.com/test.png',width: 200.w,)//网络图片
Image.file(File('/Users/zhangyong/Downloads/test.png'))//本地文件

Icon

创建一个显示图标的容器

Icon(Icons.add,size:20.r)//Material图标库示例
Icon(const IconData(0xe637, fontFamily: 'iconfont'), color: Colors.white, size: 20.r)//iconfont调用示例

Material图标库

Iconfont使用
1. 下载Iconfont

解压压缩包得到iconfont.ttf
将ttf字体文件复制到assets/font目录下
在pubspec.yaml---font中引入
使用参照上例修改Unicode码

SafeArea

创建一个安全区域以适配异形屏与顶部状态栏

GridView

创建一个网格布局

GridView.count(
          physics: const NeverScrollableScrollPhysics(),//禁止滚动
          padding: EdgeInsets.symmetric(vertical: 20.h),
          crossAxisCount: 4,//四个一列
          mainAxisSpacing: 10.h,
          children: [A(),B()]
)

TextField

创建一个输入框，参考ex_input组件

ListTile

创建一个列表条目容器

ListTile(
  leading:Image.asset('assets/images/common/head.png'),//左1
  title: Text('周生'),//左2上
  subtitle: Text('这是一个小标题'),//左2下
  trailing: Icon(Icons.more_outlined),//右侧
)

GestureDetector

创建一个可点击区域

GestureDetector(
  onTap: (){
  	print('点击了');
  },
  child: A(),
)

Visibility

创建一个用于控制显示隐藏的区域

bool isShow = true;
Visibility(visible: isShow, child: A())

MaterialButton

创建一个Material风格的按钮

MaterialButton(
  color: Colors(0xFFFF0000),
  height: 40.h,
  minWidth: double.infinity,
  onPressed: (){},
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.w)),
  child:A()
)

Expanded

用于创建一个剩余空间延伸的容器（同类作用的还有Spacer组件）

Row(
  children: [
    A(),
    Expanded(flex:1,child: B())
  ],
)

TabBar/TabBarView

用于创建一个可以滑动的tab空间，参考ex_tab组件

Stack/Positioned

用于创建一个层叠布局容器（两个组件之间的层叠可以使用Align替代）

Stack(
    alignment: AlignmentDirectional.topEnd,
    children: [
      Text('底层'),
      Positioned(right: 10.w,child: Text('上层'))//Positioned可以指定具体位置
    ],
)

扩展组件

没时间具体写，基本都有示例，可以根据业务自行微调

其他

原生调用

大部分原生调用可以从pub仓库中找到相应的插件，比如相机、定位、蓝牙、wifi、nfc、截屏、文件读写、sqlite等

目前项目之集成了部分需要用到的功能

大部分原生调用都涉及修改android/ios部分的代码以适配

插件仓库

有些问题

遇到报错，首先可以尝试清理flutter编译中的缓存——flutter clean———flutter pub get

调试使用vscode断点+print控制台输出

Flutter项目初学记 三