Flutter学习–基础控件

• 2019 年 10 月 8 日
• 筆記

在开始使用flutter之前,需要熟悉dart语法,然后就开始学flutter的基础控件了.

Widget介绍

贴上flutter官网的介绍:

Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）。

实现一个Flutter应用程序,需要在runApp函数中传入widget.

下面是一个最简单的Flutter应用程序:

import 'package:flutter/material.dart';    void main() {    runApp(      new Center(        child: new Text(          'Hello, world!',          textDirection: TextDirection.ltr,        ),      ),    );  }

1.StatelessWidget和StatefulWidget

widget可以分为StatelessWidget和StatefulWidget,即不需要改变状态和可以改变状态的widget.

2.基础widget

列举基础的widget,属性皆可在源码中看到(F12),就不一一列举啦…

• MaterialApp

作为根组件,里面包含很多属性,例如:home / title / theme 等

• Scaffold

Scaffold实现了基本布局结构,属性主要有: appBar / body / floatingActionButton / drawer / backgroundColor 等

• Text

文本组件.包含属性有:

textAlign: center / right / left;

textDirection: ltr / rtl;

overflow: (文字超出屏幕之后的处理方式) clip / fade / ellipsis;

textScaleFactor: 文字显示最大行数;

style: 字体的样式调整

• Container

容器组件,相当于div.包含属性有:

color / width / height / child / margin / padding / decoration / transform 等

• 图片组件

Image.network()放置远程图片,Image.asset(),属性有: color / alignment / colorBlendMode / fit 等

实现圆角图片: 1.通过container的borderRadius; 2.borderRadius结合image属性; 3.ClipOval类

• 布局组件:Row + Column
• 列表组件:ListView + GridView

正在学习中,持续更新哈