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

相关推荐
方文_6 小时前
flutter~loading效果
flutter
唯有选择6 小时前
让你的应用界面好看的基石:Flutter主题Theme使用和扩展自定义字段
前端·flutter
sunly_11 小时前
Flutter:导航固定背景图,滚动时导航颜色渐变
android·javascript·flutter
恋猫de小郭13 小时前
为什么跨平台框架可以适配鸿蒙,它们的技术原理是什么?
android·前端·flutter
SY.ZHOU14 小时前
详细讲解Flutter GetX的使用
flutter
sunly_14 小时前
Flutter:下拉框选择
flutter
明似水14 小时前
用 Melos 解决 Flutter Monorepo 的依赖冲突:一个真实案例
前端·javascript·flutter
张风捷特烈15 小时前
每日一题 Flutter#5,6 | 两道 Widget 选择题
android·flutter
玖夜Kty1 天前
国内环境修改 flutter.bat 来设置 flutter 的网络环境
flutter
LinXunFeng1 天前
Flutter - GetX Helper 助你规范应用 tag
flutter·github·visual studio code