Flutter入门并开发天气预报APP(4)——基础Widget

到这章我们就差不多可以开始写天气预报了。首先我们来看一下一些基础简单的Widget。

1. 基础组件

1.1 文本

Text用于显示简单的文本，包含一些控制文本显示的属性。

Text(
    "1234",
),
Text(
    "1234",
    style: TextStyle(
        color: Colors.purple,
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
    ),
),

• 需要显示的文本信息直接放到一个双引号里面就可以了；
• textAlign：文本对齐方式；
• maxLines：文本显示的最大行数；
• overflow：指定多余文本的截断方式；
• textScaleFactor：指定文本相对于当前字体大小的缩放因子；
• TextStyle：设置显示文本的字体、颜色、粗细等样式：
  • height：指定行高，但是不是绝对值，而是一个因子，相当于fontsize * height；
  • fontFamily：设置字体；
  • fontSize：设置字体大小

1.2 按钮

不同的组件库有不同的按钮，我们现在只拿Material组件库中的按钮举例。

RaisedButton

漂浮按钮，带有阴影和灰色背景。按下后阴影会变大。

RaisedButton(
  child: Text("1234"),
  onPressed: () {
   },
);

FlatButton

扁平化按钮，背景透明且不带阴影，按下后会有背景色。

FlatButton(
  child: Text("1234"),
  onPressed: () {
   },
)

IconButton

可点击的Icon，默认没有背景，按下后出现阴影

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
   },
)

1.3 图片

我们通过Image来显示图片，来源可以是asset、网络等位置。

从asset加载图片

1. 现在项目根目录(也就是和android、ios、lib等目录同级)新建一个images目录，并把图片main.png拷进去；
2. 在pubspec.yaml中的flutter部分添加一下内容：
   
3. 加载该图片

Image(
  image: AssetImage("images/amoled.png"),
);

Image也提供了一个快速构造函数：

Image.asset(
  "images/amoled.png",
)

从网络加载图片

Image(
  image: NetworkImage(
      "https://s2.ax1x.com/2019/05/27/VZrQ3V.png"),
)

或者

Image.network(
  "https://s2.ax1x.com/2019/05/27/VZrQ3V.png",
)

参数

Image有一些基本参数

const Image({
   
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this