30天计划第7天-常用基础 Widget（文本、图片、按钮）

• 学习内容：

  1. Text（字体大小、颜色、加粗）、Image（本地图片、网络图片）

  2. 按钮：ElevatedButton（带阴影）、TextButton（文字按钮）、点击事件（onPressed）

• 实践任务：

  1. 做一个 “个人名片” 页面：显示头像（网络图片）、姓名（加粗）、签名（灰色小字）

  2. 加一个按钮：点击后打印 “按钮被点击”，并弹出一个简单提示（用 print 暂代）

一、文本组件（Text）详解※

1. Text组件基本用法※

Text组件用于显示文本，是Flutter中最基础的组件之一。基本语法：

Text(
  '要显示的文本内容',
  style: TextStyle(
    // 文本样式属性
  )
)

2. 核心样式属性※

• 说明
  • 颜色可以使用Flutter内置的Colors常量，也可以用Color(0xFFFF0000)自定义十六进制颜色
  • fontWeight中的bold等价于w700
• 示例代码

 import 'package:flutter/material.dart';

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

class App extends StatelessWidget{
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text组件示例'),),
        body: const Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('普通文本'),
              SizedBox(height: 10,),
              Text(
                '大号加粗红色文本',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.red,
                  height: 1.3
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

• 运行效果

二、图片组件（Image）详解※

1. Image组件作用※

Image组件用于显示图片，支持加载网络图片、本地资源图片、文件图片等。

2. 加载网络图片※

使用NetWorkImage加载网络图片（需要网络权限，Flutter默认允许）：

Image(
  image: NetworkImage('https://upyun.askrabbit.net/avatar.png'), // 网络图片URL
  width: 200, // 图片宽度
  height: 200, // 图片高度
  fit: BoxFit.cover // 图片填充方式
 )

• 常用fit的属性值
  • BoxFit.cover：保持比例，填满容器（可能裁剪部分内容）
  • BoxFit.contain：保持比例，完整显示在容器内
  • BoxFit.fill：拉伸填满容器（可能变形）
  • BoxFit.none：不缩放，按原图大小显示

3. 加载本地图片※

• 步骤一：在项目根目录创建Images文件夹，放入图片（如：avatar.png）
• 步骤二：在pubspec.yaml中配置资源（注意缩进）

flutter:
  assets:
    - images/avatar.png  # 配置具体图片
    # 或配置整个文件夹：- images/

• 步骤三：使用AssetImage加载

Image(
  image: AssetImage("images/avatar.png"), // 本地图片路径
  width: 150,
  height: 150,
  fit: BoxFit.cover,
)

• 示例代码

import 'package:flutter/material.dart';

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

class App extends StatelessWidget{
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text组件示例'),),
        body: const Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image(
                image: AssetImage('images/avatar.jpg'),
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              )
            ],
          ),
        ),
      ),
    );
  }
}

• 运行效果

三、按钮组件与点击事件※

1. ElevatedButton（带阴影按钮）※

自带背景色和阴影效果，适合重要操作，基本用法：

ElevatedButton(
  onPressed: () {
    // 点击事件回调
    print('ElevatedButton被点击了');
  },
  child: const Text('点击'), // 按钮文字
)

2. TextButton（文字按钮）※

无背景色和阴影，只有文字，适合次要操作，基本用法：

TextButton(
  onPressed: () {
    print('TextButton被点击了');
  },
  child: const Text('点击我'),
)

3. 按钮样式设置※

可以通过style属性自定义按钮样式

ElevatedButton(
  onPressed() {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue, // 按钮背景色
    foregroundColor: Colors.white, // 文字颜色
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12), //  内边距
    shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(8) // 圆角
    )
  ),
  child: const Text('自定义样式按钮'),
)

4. 点击事件详解※

onPressed是按钮的核心属性，接收一个无参函数：

• 当onPressed: null时，按钮会处于禁用状态（灰色，不可点击）
• 可以在回调中执行任何操作：打印日志、跳转页面、修改数据等