Flutter学习-8
2024-11-18 04:27:20
Flutter的基础Widget,文本Widget,按钮Widget,图片Widget
3098

普通文本展示

在Flutter中，我们可以将文本的控制显示分成两类：

控制文本布局的参数： 如文本对齐方式 textAlign、文本排版方向 textDirection，文本显示最大行数 maxLines、文本截断规则 overflow 等等，这些都是构造函数中的参数；

控制文本样式的参数： 如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style 中；

下面我们来看一下其中一些属性的使用：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Text(
   "《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
   style: TextStyle(
    fontSize: 20,
    color: Colors.purple
   ),
  );
 }
}

我们可以通过一些属性来改变Text的布局：

  • textAlign：文本对齐方式，比如TextAlign.center
  • maxLines：最大显示行数，比如1
  • overflow：超出部分显示方式，比如TextOverflow.ellipsis
  • textScaleFactor：控制文本缩放，比如1.24
class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Text(
   "《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
   textAlign: TextAlign.center, // 所有内容都居中对齐
   maxLines: 3, // 显然 "生。" 被删除了
   overflow: TextOverflow.ellipsis, // 超出部分显示...
//   textScaleFactor: 1.25,
   style: TextStyle(
    fontSize: 20,
    color: Colors.purple
   ),
  );
 }
}

富文本展示

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Text.rich(
   TextSpan(
    children: [
     TextSpan(text: "《定风波》", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.black)),
     TextSpan(text: "苏轼", style: TextStyle(fontSize: 18, color: Colors.redAccent)),
     TextSpan(text: "\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。")
    ],
   ),
   style: TextStyle(fontSize: 20, color: Colors.purple),
   textAlign: TextAlign.center,
  );
 }
}

按钮Widget

 按钮的基础

Material widget库中提供了多种按钮Widget如FloatingActionButton、RaisedButton、FlatButton、OutlineButton等

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Column(
   children: <Widget>[
    FloatingActionButton(
     child: Text("FloatingActionButton"),
     onPressed: () {
      print("FloatingActionButton Click");
     },
    ),
    RaisedButton(
     child: Text("RaisedButton"),
     onPressed: () {
      print("RaisedButton Click");
     },
    ),
    FlatButton(
     child: Text("FlatButton"),
     onPressed: () {
      print("FlatButton Click");
     },
    ),
    OutlineButton(
     child: Text("OutlineButton"),
     onPressed: () {
      print("OutlineButton Click");
     },
    )
   ],
  );
 }
}
RaisedButton(
 child: Text("同意协议", style: TextStyle(color: Colors.white)),
 color: Colors.orange, // 按钮的颜色
 highlightColor: Colors.orange[700], // 按下去高亮颜色
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), // 圆角的实现
 onPressed: () {
  print("同意协议");
 },
)

图片Widget

图片可以让我们的应用更加丰富多彩，Flutter中使用Image组件

Image组件有很多的构造函数，我们这里主要学习两个：

  1. Image.assets：加载本地资源图片；
  2. Image.network：加载网络中的图片；

加载网络图片

相对来讲，Flutter中加载网络图片会更加简单，直接传入URL并不需要什么配置，所以我们先来看一下Flutter中如何加载网络图片。

我们先来看看Image有哪些属性可以设置：

const Image({
 ...
 this.width, //图片的宽
 this.height, //图片高度
 this.color, //图片的混合色值
 this.colorBlendMode, //混合模式
 this.fit,//缩放模式
 this.alignment = Alignment.center, //对齐方式
 this.repeat = ImageRepeat.noRepeat, //重复方式
 ...
})
  1. width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，但可以通过下面介绍的fit属性来指定适应规则。
  2. fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：
  3. fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
  4. cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
  5. contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
  6. fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
  7. fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
  8. none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
  9. color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式；
  10. repeat：当图片本身大小小于显示空间时，指定图片的重复规则。


class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    child: Image.network(
     "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
     alignment: Alignment.topCenter,
     repeat: ImageRepeat.repeatY,
     color: Colors.red,
     colorBlendMode: BlendMode.colorDodge,
    ),
    width: 300,
    height: 300,
    color: Colors.yellow,
   ),
  );
 }
}

3.2. 加载本地图片

加载本地图片稍微麻烦一点，需要将图片引入，并且进行配置

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    width: 300,
    height: 300,
    color: Colors.yellow,
    child: Image.asset("images/test.jpeg"),
   ),
  );
 }
}

配置文件在pubsepc.yaml文件中配置

assets:
-assets/images/
最新文章