flutter软件开发笔记04-基本组件的使用解析

每一种桌面，手机APP软件，侧重于交互，这样来看，这样类型的软件分为界面与逻辑两大部分，初步学习flutter框架，如果一头先扎进dart语言本身里，不是一个好的方法，不如从界面开始，先学会界面，所得所见，理解快一些，再从界面开始，实现逻辑，通信，存储，无非如此。

下面一个例子，来理解各组件的初步方法：

一 软件界面

二 代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 顶级组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatelessWidget 学习小例子'),
        ),
        body: Center(
          child: UserProfileCard(
            userName: 'linuxer',
            userBio: 'Flutter开发者 | 数据分析者',
          ),
        ),
      ),
    );
  }
}

// 自定义的 StatelessWidget
class UserProfileCard extends StatelessWidget {
  final String userName;
  final String userBio;

  // 构造函数：接收外部参数
  const UserProfileCard({
    Key? key,
    required this.userName,
    required this.userBio,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white70,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 7,
            offset: Offset(0, 3),
          )
        ],
      ),
      width: 300,
      child: Column(  //线性垂直布局
        mainAxisSize: MainAxisSize.min,
        children: [
          // 头像部分,容器实现
          Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('assets/profile.webp'), // 需要添加图片资源
              ),
            ),
          ),
          SizedBox(height: 16), //
          // 姓名，基础组件text
          Text(
            userName,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.blue[800],
            ),
          ),
          SizedBox(height: 8),
          // 简介
          Text(
            userBio,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.grey[600],
              height: 1.4,
            ),
          ),
          SizedBox(height: 16),
          // 按钮
          ElevatedButton.icon(
            icon: Icon(Icons.message, size: 18),
            label: Text('发送消息'),
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue[600],
              padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
            ),
            onPressed: () {
              print('按钮被点击'); // 实际使用时可以添加交互逻辑
            },
          ),
        ],
      ),
    );
  }
}

三 代码分析

1. 包含以下典型组件：
2. 布局组件：Container, Column, SizedBox, Center
3. 基础组件：Text, Icon, ElevatedButton
4. 样式组件：BoxDecoration, BoxShadow, TextStyle
5. 使用特点：

• 通过构造函数接收参数（userName 和 userBio）
• 使用不可变属性（final 修饰）
• 包含完整的组件树结构
• 使用了多种样式配置
• 包含按钮的点击事件（虽然无状态但可以与父组件交互）

3. 使用说明：

• 需要在自己的项目中添加图片资源（在项目目录创建 assets 文件夹，并在 pubspec.yaml 中配置资源路径）
• 可以修改颜色、尺寸等参数查看不同效果
• 点击按钮会在控制台输出信息

这个示例展示了如何：

1. 创建自定义 StatelessWidget
2. 通过构造函数接收参数
3. 组合多个基础组件
4. 添加基本样式和交互
5. 构建可复用的界面组件

四 总结

通过改变代码中的各参数，重新编译后，看看效果，很快地掌握这个框架