Flutter学习笔记（一）

创建一个App

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            centerTitle: true,
            title: new Text("AppBar title"),
          ),
          body: new Center(
            child: new Text("Hello Flutter"),
          ),
        ));
}

• main()函数为应用入口，runApp()方法启动Flutter应用，需要传入一个Widget参数，=>单行函数或方法的简写
• AppBar标题栏，设置centerTitle为true居中显示标题，Text 文本

FloatingActionButton

Material风格悬浮按钮

 floatingActionButton: new FloatingActionButton(
        onPressed: _routeTest,
        child: new Icon(Icons.add),
  )

• onPressed点击事件 此处添加了跳转界面方法
• Icon系统自带的图标

界面跳转

///界面跳转
  void _routeTest() {
    //跳转
    Navigator.push(context, new MaterialPageRoute(builder: (context) {
      return new NewRoute();
    }));
  }

• 需要导入dart文件import 'NewRoute.dart'; 或者

//需要先注册路由表
 routes: {
   "new_route": (context) => NewRoute(),
 }

 ///界面跳转
  void _routeTest() {
    //命名路由跳转
    Navigator.pushNamed(context, "new_route");
  }

加载图片

1.加载本地图片，首先在项目根目录创建一个images文件夹，将图片放入，然后再pubspec.yaml中的flutter:下添加

  assets:
    - images/ic_back.png

代码中使用

child: Image(
    image: AssetImage("images/ic_back.png"),
    width: 100
),

2.加载网络图片

child: Image.network(
    "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
    width: 100,
)

布局Widget

• 水平布局Row

      body: Row(
        //宽度占多少 max:充满 min:适应控件的宽度
        mainAxisSize: MainAxisSize.max,
        //水平对齐方式 start:居左 center:居中 end:居右
        mainAxisAlignment: MainAxisAlignment.start,
        //垂直对齐方式 start:居上 center:居中 end:居下
        crossAxisAlignment: CrossAxisAlignment.end,
        //布局方式 ltr:从左到右 rtl:从右到左
        textDirection: TextDirection.ltr,
        //children:子widget组
        children: [
          Text(
            "first text",
            style: TextStyle(fontSize: 30),
          ),
          Text("second text"),
        ],
      ),

• 垂直布局Column

      body: Column(
        //宽度占多少 max:充满 min:适应控件的宽度
        mainAxisSize: MainAxisSize.max,
        //垂直对齐方式 start:居左 center:居中 end:居右
        mainAxisAlignment: MainAxisAlignment.start,
        //水平对齐方式 start:居上 center:居中 end:居下
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "first text",
            style: TextStyle(fontSize: 30),
          ),
          Text("second text"),
        ],
      ),

• 弹性布局Flex

      body: Flex(
        direction: Axis.horizontal,
        children: [
          Expanded(
            //弹性系数
            flex: 1,
            child: Container(
              height: 30,
              color: Colors.yellowAccent,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              height: 30,
              color: Colors.lightBlue,
            ),
          )
        ],
      ),

Expanded按比例扩伸子widget空间，flex属性类似设置weight

• 按照1：2的比例显示按钮

                Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                      flex: 1,
                      ///ConstrainedBox给子widget添加约束
                      child: ConstrainedBox(
                        //设置宽度充满屏幕
                        constraints: BoxConstraints(minWidth: double.infinity),
                        child: blueBtn,
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: ConstrainedBox(
                        constraints: BoxConstraints(minWidth: double.infinity),
                        child: Container(
                          margin: EdgeInsets.only(left: 10),
                          child: blueBtn,
                        ),
                      ),
                    ),
                  ],
                ),

  ///按钮
  Widget blueBtn = RaisedButton(
    onPressed: () {},
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    color: Colors.blue,
    textColor: Colors.white,
    child: Text("Button"),
  );

• 流式布局，可以自动换行

              Center(
                child: Wrap(
                  //水平方向间距
                  spacing: 10,
                  //垂直方向间距
                  runSpacing: 5,
                  //多行对齐方式
                  alignment: WrapAlignment.center,
                  children: [
                    Chip(
                      label: Text("One"),
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text("A"),
                      ),
                    ),
                    Chip(
                      label: Text("Two"),
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text("B"),
                      ),
                    ),
                    Chip(
                      label: Text("Three"),
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text("C"),
                      ),
                    ),
                    Chip(
                      label: Text("FourFourFour"),
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text("D"),
                      ),
                    ),
                  ],
                ),
              ),