flutter 基础

项目初始化

• 项目目录

• Material Design(Google 推出的前端 ui 解决方案)(就一个组件库)
  • 官网https://www.material.io
  • 中文网：https://material-io.cn
• Flutter 中一切内容都是组件（Widget）
  • 无状态组件（StatelessWidget）
  • 有状态组件（StatefulWidget）

App 的结构

• MaterialApp
  • title(任务管理器中的标题)
  • home(主内容)
  • debugShowCheckedModeBanner(是否显示左上角调试标记)
• Scaffold(脚手架)
  • appBar(应用头部)
  • body(引用主体)
  • floatingActionButton(浮动按钮)
  • drawer（左侧抽屉菜单）
  • endDrawer(右侧抽屉菜单)

略

基础组件

常用的-Text 文本组件

• Text
  • TextDirection (文本方向)
  • TextStye（文本样式）
    • Color(文本颜色)
    • FontWeight(字体粗细)
    • FontStyle(字体样式)
  • TextAlign(文本对齐)
  • TextOverFow(文本溢出)
  • maxLines(指定显示的行数)
• RichText 与 TextSpan 给一段文本声明不同的多个样式

设置自定义字体

• 下载并导入字体
  • https://fonts.google.com/
  • 解压，将字体文件赋值到 Flutter 项目中
• 在 pubspec.yaml 中声明字体

• 使用
  • 为整个应用设置默认自定义字体
  • 为某一个组件设自定义字体

fonts:
    - family: SourceSansPro
      fonts:
        - asset: XXX.ttf
        - asset: XXX2.ttf
          weight: 300
          style: italic

class MyApp extends StateLessWidget{
    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'Flutter Demo',
            home:Home(),
            theme: ThemeData(fontFamily:'SourceSansPro'),
            debugShowCheckedModeBanner:false,
        )
    }
}

style: TextStyle(
    fontFamily:'SourceSansPro'
)

基础组件 Icon

• Icon
  • Flutter 中的图标库
  • Icon(Icons.具体名称)
• 在线预览
  • https://material.io/resources/icons

基础组件 color

• Color (自定义颜色)
  • Flutter 中通过 ARGB 来声明颜色
  • const Color(0xFF42A5F5); //16 进制的 ARGB=透明度+六位十六进制的颜色
  • const Color.fromARGB(0xFF,0x42,0xA5,0xF5);
  • const Color.fromARGB(255,66,165,245);
  • const Color.fromRGBO(66,165,245,1.0);//O=Opacity
• Colors(英文字母声明的颜色)
  • Colors.red
  • Colors.red[200]