Flutter - 基础Widget

Flutter 中万物皆 Widget，基础Widget 同步对应 Android View.

普通文本 Text

复制代码

/**
 * 控制文本样式统一使用 style:TextStyle, 例：fontSize(字体大小),color(颜色),shadows(阴影)等等
 * 控制文本布局需单独设置：
 *  textAlign(文不对齐方式)
 *  textDirection(文不排版方向)
 *  maxLines(最大行数)
 *  overflow(文本截断规则)
 */
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "赵钱孙李，周吴郑王。冯陈褚卫，蒋沈韩杨。朱秦尤许，何吕施张。孔曹严华，金魏陶姜。戚谢邹喻，柏水窦章。云苏潘葛，奚范彭郎。鲁韦昌马，苗凤花方。俞任袁柳，酆鲍史唐。",
      style: TextStyle(
          fontSize: 20,
          color: Colors.blueGrey,
          decoration: TextDecoration.none),
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
      textAlign: TextAlign.center,
    );
  }
}

按钮 Button

复制代码

/**
 * Button
 * 最基础最常用：ElevatedButton,TextButton 和 OutlinedButton (Material Design的按钮)
 * 注：旧版的 FlatButton,RaisedButton,OutLineButton 已被上面控件取代
 * 还有显示图标IconButton 和 悬浮按钮FloatingActionButton
 * 最后用于弹出菜单的 PopupMenuButton
 *
 * 主次操作：
 * ElevatedButton: 凸起的按钮，适合主要操作（如确认、提交）
 * TextButton: 文本按钮
 * OutlinedButton: 带边框的按钮
 *
 * 图标类操作:
 * IconButton: 显示图标的按钮
 * FloatingActionButton: 悬浮按钮，用于突出核心操作
 */
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              print("Click --- ElevatedButton");
            },
            child: Text("ElevatedButton")),
        TextButton(
          child: Text(
            "TextButton",
            style: TextStyle(color: Colors.black87),
          ),
          style: TextButton.styleFrom(backgroundColor: Colors.blue),
          // onHover: Colors.blue,
          onPressed: () {
            print("Click --- TextButton");
          },
        ),
        OutlinedButton(
            onPressed: () {
              print("Click --- OutlinedButton");
            },
            child: Text("OutlinedButton")),
        IconButton(
            onPressed: () {
              print("Click --- IconButton");
            },
            icon: Icon(Icons.add)),
        FloatingActionButton(
            child: Text("悬浮按钮"),
            backgroundColor: Colors.teal,
            onPressed: () {
              print("Click --- FloatingActionButton");
            }),
        PopupMenuButton(
            itemBuilder: (context) => [
                  PopupMenuItem(child: Text("选项1")),
                  PopupMenuItem(child: Text("选项2")),
                  PopupMenuItem(child: Text("选项3")),
                  PopupMenuItem(child: Text("选项3")),
                ]),
      ],
    );
  }
}

图片 Image

复制代码

width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，
尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，
但可以通过下面介绍的 fit属性 来指定适应规则。

fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
   cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
   contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
   fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
   fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
   none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。

加载网络图片

Dart 复制代码

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
      "https://img0.baidu.com/it/u=546698500,87821893&fm=253&fmt=auto&app=138&f=PNG?w=1008&h=500",
          alignment: Alignment.topCenter,
          // color: Colors.redAccent,
          // fit: BoxFit.cover,
        ),
        width: 300,
        height: 250,
        color: Colors.yellow,
      ),
    );
  }
}

加载本地图片

Dart 复制代码

/**
 * 1 在项目根目录创建 assets 文件夹用于存放资源文件(可创建 images 用于区分资源)
 * 2 在 pubspec.yaml 进行配置
 * 3 Image.asset 使用图片
 */
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset("assets/images/aaa.png"),
        width: 300,
        height: 250,
        color: Colors.yellow,
      ),
    );
  }
}

圆形头像

Dart 复制代码

/**
 * 圆形头像（正圆）
 * 使用 CircleAvatar 组件，这是最简单的内置圆形头像组件
 * 加载网络图片：backgroundImage: NetworkImage(url)
 * 加载本地图片：backgroundImage: AssetImage("assets/images/aaa.png")
 */
class MyStatelessWidget extends StatelessWidget {
  final imgUrl =
      "https://img0.baidu.com/it/u=2428089966,1135217866&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

  @override
  Widget build(BuildContext context) {
    return Center(
        child: CircleAvatar(
      backgroundImage: NetworkImage(imgUrl),
      // 控制大小
      radius: 100,
      // 无背景色
      backgroundColor: Colors.transparent,
    ));
  }
}

Dart 复制代码

/**
 * 圆形头像（正圆）
 * 使用 ClipOval + Image,通过裁剪实现圆形，更灵活
 */
class MyStatelessWidget extends StatelessWidget {
  final imgUrl =
      "https://img0.baidu.com/it/u=2428089966,1135217866&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ClipOval(
          child: Image.network(
            imgUrl,
            width: 140,
            height: 140,
            // 确保图片填充
            fit: BoxFit.cover
          ),
        )
    );
  }
}