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

相关推荐
AD钙奶-lalala2 小时前
在 macOS 上搭建 Flutter 开发环境
flutter·macos
恋猫de小郭5 小时前
iOS 26 beta1 重新禁止 JIT 执行,Flutter 下的 iOS 真机 hot load 暂时无法使用
android·前端·flutter
vvilkim6 小时前
Flutter开发入门:Dart语言基础全面解析
android·前端·flutter
hepherd6 小时前
Flutter - 原生交互 - 相机Camera - 02
flutter
zacksleo6 小时前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo7 小时前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos
zacksleo7 小时前
鸿蒙Flutter实战:22-混合开发详解-2-Har包模式引入
前端·flutter·harmonyos
zacksleo7 小时前
鸿蒙Flutter实战:21-混合开发详解-1-概述
前端·flutter·harmonyos
Huang兄11 小时前
鸿蒙-flutter-使用FlutterEntry的路由管理和参数传递_上
flutter·harmonyos·arkui
Huang兄11 小时前
鸿蒙-flutter-如何向现有鸿蒙项目中添加flutter模块
flutter·harmonyos·arkui