flutter软件开发笔记12-各功能组件讲解

flutter 3中的文本、按钮、图片、布局等都是最基本的核心功能组件，程序最基本组件，需要针对每一个组件，掌握常用的方法，才能开发软件。

一 程序界面

二 代码实现

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 组件演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
      // 添加错误处理
      builder: (context, child) {
        ErrorWidget.builder = (FlutterErrorDetails details) {
          return Center(
            child: Text('发生错误，请重启应用'),
          );
        };
        return child!;
      },
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void dispose() {
    // 清理资源（如果有）
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('组件演示'),
        actions: [
          IconButton(
            icon: Icon(Icons.info),
            onPressed: () => print('信息按钮被点击'),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 文本组件
            Text(
              '文本样式演示',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 8),
            Text(
              '这是一段普通文本，用于展示基本文字显示效果。可以设置颜色、字号、字体等属性。',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            SizedBox(height: 40),

            // 按钮组件
            Text('按钮演示', 
              style: Theme.of(context).textTheme.titleLarge),
            SizedBox(height: 12),
            Row(
              children: [
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: Text('计数 (+1)'),
                ),
                SizedBox(width: 12),
                OutlinedButton(
                  onPressed: () => print('点击边框按钮'),
                  child: Text('边框按钮'),
                ),
                SizedBox(width: 12),
                TextButton(
                  onPressed: () => print('点击文字按钮'),
                  child: Text('文字按钮'),
                ),
              ],
            ),
            SizedBox(height: 12),
            IconButton(
              icon: Icon(Icons.favorite_border),
              color: Colors.red,
              onPressed: () => print('收藏'),
            ),
            Text('当前计数: $_counter', style: TextStyle(fontSize: 18)),
            SizedBox(height: 40),

            // 图片组件
            Text('图片演示', 
              style: Theme.of(context).textTheme.titleLarge),
            SizedBox(height: 12),
            Column(
              children: [
                // 网络图片（添加加载指示器和错误处理）
                Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: Image.network(
                      'https://picsum.photos/200/150',
                      width: 200,
                      height: 150,
                      fit: BoxFit.cover,
                      loadingBuilder: (context, child, loadingProgress) {
                        if (loadingProgress == null) return child;
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      },
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          width: 200,
                          height: 150,
                          color: Colors.grey[200],
                          child: Icon(Icons.error),
                        );
                      },
                    ),
                  ),
                ),
                SizedBox(height: 20),
                // 使用本地图标替代本地图片
                Icon(Icons.image, size: 100, color: Colors.blue),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

三 代码讲解

文本组件：展示不同风格的文本，包含标题、普通文本和动态计数文本

按钮组件： 包含提升按钮（ElevatedButton） 边框按钮（OutlinedButton） 文字按钮（TextButton） 图标按钮（IconButton）

图片组件： 网络图片加载（使用 Lorem Picsum 的随机图片） 本地图片加载（需要配置资源文件）

交互功能： 点击按钮可增加计数 浮动按钮同步增加计数 所有按钮点击时控制台输出日志

布局组件： 使用 Column 纵向排列 使用 Row 横向排列按钮 使用 Container 添加装饰效果 使用 SingleChildScrollView 支持滚动

四 总结

无论什么程序开发，主要有想法，才能开发出的好的软件来，借助于大模型，开发程序更加快了，提高生产力，解决现实中的问题。