Flutter初探

flutter-widgets.png

一、MaterialApp(App素材)

home属性(主界面)
需要一个Widget 作为主一个程序的入口
Scaffold小部件 1. 带有导航栏(appBar)的小部件
2.导航栏可以设置文字、颜色。而且可以自动以Widget(自定义导航栏)
body属性 显示在导航栏下面的区域,类似iOS中ViewController中的self.view
import 'package:flutter/material.dart'; // flutter素材,类似iOSUIKit
import 'model/car.dart';

void main() {
  runApp(
    App()
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.restaurant_menu),
          tooltip: 'ceshi',
          onPressed: null,

        ),
        title: const Text('Flutter Title'),
      ),
      body:const Center(
        child: Text(
          'hello flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

上面代码运行如下:


二、Widget介绍

创建一个最小的 Flutter 应用简单到仅需调用 runApp() 方法并传入一个 widget 即可

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

1. Flutter伊始,万物皆Widget;

  • Widget是什么?
    a. Widget类比iOS中的UIView,但Widget 拥有着不同的生命周期:整个生命周期内它是不可变的,且只能够存活到被修改的时候。
    b. 一旦 Widget 实例或者它的状态发生了改变, Flutter 框架就会创建一个新的由 Widget 实例构造而成的树状结构。而在 iOS 里,修改一个视图并不会导致它重新创建实例,它作为一个可变对象,只会绘制一次,只有在发生 setNeedsDisplay() 调用之后才会发生重绘。

  • Widget的特性
    a. Flutter 的 Widget是很轻量的,一部分原因就是源于它的不可变特性。因为它并不是视图,也不直接绘制任何内容,而是作为对 UI 及其特性的一种描述,而被“注入”到视图中去。可以把它理解为“声明和构造 UI 的方法”。
    b. 自定义一个Widget要能够被渲染,需要实现 - build方法

  • Widget的分类

    • 有状态:statefulWiget
      widget 在 build 方法之外(比如运行时下发生用户点击事件)需要被修改,那么就应该是有状态的。访问数据在state里边,通过setState设置/改变数据
    • 无状态:statelessWidget
      widget 一旦生成就不再发生改变,那么它就是无状态的
  • StatefulWidget 和 StatelessWidget 的区别
    StatefulWidget 中有一个 State 对象,它用来存储一些状态的信息,并在整个生命周期内保持不变。总之,如果一个 WidgeTbuild方法之外(比如运行时下发生用户点击事件)被修改,那么就应该是有状态的。如果一个 widget 一旦生成就不再发生改变,那么它就是无状态的。

  • 常用的基础Widget

Text Text widget 可以用来在应用内创建带样式的文本。
Row, Column 这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。
Stack Stack widget 不是线性(水平或垂直)定位的,而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget,以相对于 Stack 的上,右,下,左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。
Container Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰,如背景,边框,或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外,Container可以使用矩阵在三维空间进行转换。
GridView 将 widget 展示为一个可滚动的网格。
ListView 将 widget 展示为一个可滚动的列表。
Card 将相关信息整理到一个有圆角和阴影的盒子中。
ListTile 将最多三行的文本、可选的导语以及后面的图标组织在一行中。

特别说明下stack以及和其常搭配在一块的小部件;

Stack
  • Stack是多层布局
  • 它的主轴方向是从内向外
  • alignment属性:(用来定位)
    • Alignment(x, y) ,x和y的取值范围-1.0~1.0
    • x=0, y=0为中心
  • Positioned小部件
    • left、top、right、bottom4个属性定位
    • 参数是像素位置
  • AspectRatio 宽高比小部件
    • 它的设置影响父布局
    • sepectRatio属性:宽高比
    • 当父布局同时有宽度和高度,那么宽高比失效

三、布局

每一个U部件都可以看成一个矩形的“盒子”,每个“盒子”都有外边距Margin和内边距Padding。

主轴:MainAxisAlignment
MainAxisAlignment 布局样式
start 向主轴开始的方向对齐
center 主轴方向居中对齐
end 向主轴结束的方向对齐
spaceBetween 剩下的空间平均分布到小部件之间
spaceAround 剩下的空间平均分布到小部件周围
spaceEvenly 剩下的空间和小部件一起平均分
交叉轴:CrossAxisAlignment 垂直于主轴方向
CrossAxisAlignment 布局样式
baseline 文字底部对齐
center 交叉轴方向居中对齐
end 向交叉轴结束的方向对齐
start 向交叉轴开始的方向对齐
stretch 填满交叉轴方向

Expanded填充布局

  • 在主轴方向不会盛夏间隙,将被Expanded白装的部件进行
    拉伸和压缩;
  • 主轴横向,宽度设置没有意义;
  • 主轴纵向,高度设置没有意义;
  • 当Text被Expanded包装后,文字可以自动换行。这也被称作灵活布局。

你可能感兴趣的:(Flutter初探)