Flutter学习笔记 (一)

Flutter基于谷歌的Dart语言,如果没有任何的Dart语言基础,建议先学习Dart语言的基本语法,然后再进入Flutter的学习

入口 , 自定义Widget, 添加背景和导航 , Container组件,Text组件详解

Flutter

在Flutter中,所有的组件都是类
在实例化组件/类的时候Flutter同样可以省略掉new关键词
在Flutter中,所有和数字相关的东西都是double类型,所以要加上.0 例如: 20.0

入口

每一个Flutter项目的lib目录里都有一个main.dart文件 ,这就是flutter的入口文件

在Dart和Flutter中允许我们实例化类的时候不写new关键词

例1:入口方法

void main(){                        //main方法是Dart的入口方法,在Dart中所有的方法都必须在main方法中
    runApp(MyApp());                //runApp方法是Flutter的入口方法,MyApp是自定义的一个组件
}
//也可以简写
void main()=>runApp(MyApp());

例2:在Flutter入口方法中输出内容,输入内容为从左往右

import 'package:flutter/material.dart';
void main(){
    runApp(new Center(                          //Flutter的入口方法,调用Center(cen ter组件,居中), 这等于说实例化Center组件
    child:new Text(                             //按Ctrl点击Center可观看使用方式,其中可以传入child参数,表示在Center组件中传入一些内容,Child组件又可以传入一个Text组件,表示文本,用逗号结束是因为这些都是参数
    '你好Flutter',                               //传入文本,也可以在下面再传入一些Text类的可选参数
    textDirection: TextDirection.ltr,            //按Ctrl点Text类可以看到这是Text中的一个可选参数,Text方向,ltr表示从左往右left to right,返过来从右往左就是rtl
    )
    ))
}                                                //运行在虚拟机上输出: 你好Flutter

如上例,实际上如果我们吧Center组件全部放在runApp的参数中是非常不合理的,因为组件有可能会非常的大,也可能有很多不同的功能,所以一般我们会吧使用自定义组件吧这些组件抽离成一个单独的文件来调用
在Flutter中,自定义组件其实就是创建一个类,这个类需要继承StatelessWidget / StatefulWidget
StatelessWidget 是无状态组件,状态不可变的widget

StatefulWidget 是有状态组件,持有的状态可能在widget生命周期改变

例1:吧上面例子中的Widget单独抽离成一个类

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget{                //自定义MyApp类继承自抽象类StatelessWidget
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(                              //吧Widget返回给MyApp
        child:new Text(
          '你好Flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 25,
            color: Colors.red,
          ),
        )
    );
  }

}
void main(){
  runApp(MyApp());                                //调用MyApp 输出: 25大小字体 红色的 你好Flutter

}

添加背景和导航

例1:使用MaterialApp 和 Scaffold两个组件给上面例子添加背景和导航
MaterialApp组件是一个很常见的组件非常常用,他封装了应用程序实现Material Design所需要的一些组件 ,一般作为最顶层的根组件使用
Scaffold是Materrial Design布局结构的基本实现,此类提供了用于显示drawer , snackbar 和底部sheet的API
- appBar : 显示在界面顶部的一个AppBar , body : 当前界面所显示的主要内容Widget , drawer : 抽屉菜单控制栏

例1: 使用MaterialApp的Scaffold给上例添加导航栏和主题内容

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(                       //调用Materialapp
      home: Scaffold(                         //传入参数home(主页) 调用Scaffold
        appBar: AppBar(                       //调用Scaffold的appBar导航,传入文本
          title: Text(                        //给导航传入文本
            'Flutter Demo'
          ),
        ),
        body: Homecontent(),                  //调用Scaffold的body主题内容,传入之前做好的你好Flutter
      ),
    );
  }
}
class Homecontent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return   Center(
        child: Text(
          '你好Flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40,
            color: Colors.red,
          ),
        )
    );
  }
}
void main(){
  runApp(MyApp());
}

Container组件 , Text组件详解

Container组件是一个容器组件,用于布局

例1:使用Container容器组件装饰主题内容

Widget build(BuildContext context) {
  // TODO: implement build
  return   Center(                              //center组件表示居中
      child: Container(                         //居中添加容器组件
        child: Text(                            //容器中添加子内容文本
            '双击666'
        ),
      height: 25,                               //给容器添加高和宽,注意不要写到文本参数里面去了
      width: 100,
      decoration: BoxDecoration(                //给容器添加decoration(装饰),填充背景色 黄色
        color: Colors.yellow,
        border: Border.all(                     //使用border添加边框,宽度2,蓝色
          width: 2,
          color: Colors.blue,
        )
      ),
      )
  );

Text常见参数很简单,按着Ctrl+鼠标左键点击Text单词就可以看到可以使用的参数

例2: 把容器内的文本居中对齐

child: Container(
          child: Text(
              '双击666',
            textAlign: TextAlign.center,              //使用textAlign参数的center参数设置为居中对齐
          ),

使用borderRadius参数给容器设置圆角

decoration: BoxDecoration(
  color: Colors.yellow,
  border: Border.all(
    width: 2,
    color: Colors.blue
  ),
    borderRadius: BorderRadius.all(                  //调用borderRadius参数
        Radius.circular(10)                          //然后使用BorderRadius.all()
    )                                                //再传入参数Radius.circular(10)指圆角值为10

Lao Nian

Flutter学习笔记 (一)

Flutter

入口

自定义Widget/组件

添加背景和导航

Container组件 , Text组件详解