Flutter&鸿蒙next中封装一个输入框组件

1. 创建Flutter项目

首先，确保你已经安装了Flutter SDK，并创建一个新的Flutter项目：

flutter create podcast_app
cd podcast_app

2. 封装输入框组件

我们将在lib目录下创建一个新的文件，命名为custom_input.dart，用于封装输入框。

import 'package:flutter/material.dart';

class CustomInput extends StatelessWidget {
  final String hintText;
  final TextEditingController controller;
  final bool obscureText;
  final IconData? prefixIcon;
  
  CustomInput({
    required this.hintText,
    required this.controller,
    this.obscureText = false,
    this.prefixIcon,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      obscureText: obscureText,
      decoration: InputDecoration(
        hintText: hintText,
        prefixIcon: prefixIcon != null ? Icon(prefixIcon) : null,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

3. 使用输入框组件

现在，我们可以在主应用文件中使用这个输入框组件。在lib/main.dart中，我们会创建一个简单的UI，包含标题和输入框。

import 'package:flutter/material.dart';
import 'custom_input.dart'; // 导入自定义输入框

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

class PodcastApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Podcast App',
      home: PodcastHomePage(),
    );
  }
}

class PodcastHomePage extends StatefulWidget {
  @override
  _PodcastHomePageState createState() => _PodcastHomePageState();
}

class _PodcastHomePageState extends State<PodcastHomePage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Podcast App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              '欢迎来到播客应用',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            CustomInput(
              hintText: '输入播客名称',
              controller: _controller,
              prefixIcon: Icons.podcast,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 处理输入
                String podcastName = _controller.text;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('您输入的播客名称是: $podcastName')),
                );
              },
              child: Text('提交'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

在终端中运行以下命令以启动应用：

flutter run

5. 总结

在这个示例中，我们创建了一个简单的播客应用，封装了一个自定义输入框组件，并在主页面中使用它。你可以进一步扩展这个应用，增加更多功能，例如播客列表、搜索功能或播放功能。

后续扩展

• 状态管理：考虑使用状态管理工具如Provider或Riverpod来管理播客列表和用户输入。
• 网络请求：使用http库从网络获取播客数据并显示。
• UI优化：改进UI，添加更多样式和交互设计。