Flutter常用Widget小部件

news2025/2/2 6:17:40

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

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

Text文本Widget

文件：lib/app/app.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

import 'package:flutter/material.dart';
import 'package:package_name/app/app.dart';

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

RichText 富文本

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（图像）

显示资源包里的图像

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,
      ),
    );
  }
}

或

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定义资源名称，

  assets:
    - assets/images/1.png

显示来自网络的图像

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挂件。

容器

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 // 适应空间
            ),
      ),
    );
  }
}

装饰容器

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 // 适应空间
            ),
      ),
    );
  }
}