Flutter常用Widget小部件

小部件Widget是一个类,按照继承方式,分为无状态的StatelessWidget和有状态的StatefulWidget。

这里先创建一个简单的无状态的Text小部件。

Text文本Widget

文件:lib/app/app.dart

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      '你好世界!',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 50.0,
        color: Color(0xAAFF0000),
        backgroundColor: Color(0xAAFFFFFF),
      ),
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
    ));
  }
}

这里引用了flutter的material包,里面包含StatelessWidget类。

Flutter调用Widget

dart 复制代码
import 'package:flutter/material.dart';
import 'package:package_name/app/app.dart';

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

RichText 富文本

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: RichText(
      textDirection: TextDirection.ltr,
      text: TextSpan(text: '你好,', style: TextStyle(fontSize: 50.0), children: [
        TextSpan(
          text: '世界!',
          style: TextStyle(
            color: Colors.pinkAccent,
            fontWeight: FontWeight.bold,
          ),
        ),
        TextSpan(text: '我来了!'),
      ]),
    ));
  }
}

这里用到了RichText,详情见:https://api.flutter-io.cn/flutter/widgets/RichText-class.html

Image(图像)

显示资源包里的图像

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(
        'assets/images/1.png',
        width: 300,
      ),
    );
  }
}

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image(
        image: AssetImage('assets/images/1.png'),
        width: 300,
      ),
    );
  }
}

这里用到了图片,需要把图片放到assets/images目录下,然后在pubspec.yaml定义资源名称,

dart 复制代码
  assets:
    - assets/images/1.png

显示来自网络的图像

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image(
        image: NetworkImage(
            'https://img-home.csdnimg.cn/images/20250107060517.png'),
        width: 300,
      ),
    );
  }
}

这里用了Image挂件

容器

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.deepPurpleAccent, // 容器颜色
        alignment: Alignment.topCenter, // 对齐方式
        padding: EdgeInsets.all(60), // 边距
        child: Image(
            image: NetworkImage(
                'https://img-home.csdnimg.cn/images/20250107060517.png'),
            fit: BoxFit.cover // 适应空间
            ),
      ),
    );
  }
}

装饰容器

dart 复制代码
import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.deepOrangeAccent,
            borderRadius: BorderRadius.all(Radius.circular(25)),
            border: Border.all(
              color: Colors.deepOrangeAccent,
              style: BorderStyle.solid,
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.deepOrangeAccent,
                offset: Offset(5, 20),
                blurRadius: 30,
              )
            ]),
        alignment: Alignment.topCenter, // 对齐方式
        padding: EdgeInsets.all(0), // 边距
        width: 400,
        height: 200,
        child: Image(
            image: AssetImage('assets/images/1.png'), fit: BoxFit.cover // 适应空间
            ),
      ),
    );
  }
}

这里用到了容器装饰器BoxDecoration

相关推荐
wilinz3 小时前
Flutter 图片压缩性能对比
flutter
程序员老刘21 小时前
Dart MCP翻车了!3.9.0版本无法运行,这个坑你踩过吗?
flutter·ai编程·客户端
ideal树叶1 天前
flutter 中 的 关键字
flutter
世界不及妳微笑1 天前
Flutter 记录应用授权登录踩坑之旅
flutter
鹏多多1 天前
flutter-使用confetti制作炫酷纸屑爆炸粒子动画
android·前端·flutter
耳東陳12511 天前
【重磅发布】flutter_chen_updater-版本升级更新
flutter
HH思️️无邪2 天前
Flutter 开发技巧 AI 快速构建 json_annotation model 的提示词
flutter·json
笔沫拾光2 天前
hooks_riverpod框架解析
flutter·hooks·hooks_riverpod
problc2 天前
Flutter桌面应用实战:Windows系统代理切换工具开发
windows·flutter
程序员老刘2 天前
Cursor vs Claude Code vs AS+AI助手:谁才是客户端的编程神器?
flutter·ai编程·客户端