flutter_notes

仅做个人记录学习笔记

1 一切皆widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Text('Hello World'),
  ));
}

• 上例文字默认顶个左上角对齐，要想居中，不像web那样写样式就行，需要用其他widget辅助(如Center)

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Center(
      child: Text('Hello World'),
    ),
  ));
}

• 引入图片要用image组件，本地的图片还要去 pubspec.yaml 文件配置assets

flutter:
  uses-material-design: true
  assets:
     - images/

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    backgroundColor: Colors.blueGrey,
    appBar: AppBar(
      title: const Text('I Am Rich'),
      backgroundColor: Colors.blueGrey[900],
    ),
    body: const Center(
      child: Image(image: AssetImage('images/diamond.jpeg')),
    ),
  )));
}

2 替换图标

• 去 www.appicon.co/ 上生成需要的图标
• android替换 android/app/src/main/res 目录下的文件夹
• ios替换ios/Runner/Assets.xcassets 下的 Assets.xcassets 文件夹

3 Layoout

3.1 Container widget

• 类似html的div标签，但是Container只能有一个child
• Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

• 用 SafeArea包裹进安全区避免刘海，圆角等

body: SafeArea(
  child: Container(
    color: Colors.white,
    child: Text('Hello'),
  ),
),

3.2 Multi-child layout widgets

3.2.1 Column

• 竖向默认占据最大空间，横向最小

• 可通过mainAxisSize: MainAxisSize.min修改占据空间方式

• 可通过mainAxisAlignment: MainAxisAlignment.center 修改对齐方式