21天学会OpenHarmony跨平台开发 - windows + Flutter【Day10】

继续写下一个组件：顶部的搜索栏、分类滚动

import 'package:flutter/material.dart'; class Hmsearch extends StatefulWidget { final TextEditingController? controller; final String hintText; final VoidCallback? onSearchPressed; final VoidCallback? onCameraPressed; final ValueChanged<String>? onSubmitted; final bool showCameraIcon; final bool showSearchButton; const Hmsearch({ super.key, this.controller, this.hintText = '华为matebook触控屏', this.onSearchPressed, this.onCameraPressed, this.onSubmitted, this.showCameraIcon = true, this.showSearchButton = true, }); @override State<Hmsearch> createState() => _HmsearchState(); } class _HmsearchState extends State<Hmsearch> { @override Widget build(BuildContext context) { return Container( height: 48, decoration: BoxDecoration( border: Border.all( color: Colors.red, // 细红色边框 width: 1.5, ), borderRadius: BorderRadius.circular(8), color: Colors.white, ), child: Row( children: [ // 左侧搜索图标 const Padding( padding: EdgeInsets.symmetric(horizontal: 12), child: Icon( Icons.search, color: Colors.red, // 深红色 size: 20, ), ), // 搜索输入框 Expanded( child: TextField( controller: widget.controller, decoration: InputDecoration( hintText: widget.hintText, hintStyle: const TextStyle( color: Colors.black54, fontSize: 16, ), border: InputBorder.none, contentPadding: const EdgeInsets.only(bottom: 4), ), style: const TextStyle( color: Colors.black87, fontSize: 16, ), onSubmitted: widget.onSubmitted, ), ), // 相机图标 if (widget.showCameraIcon) Padding( padding: const EdgeInsets.only(right: 12), child: GestureDetector( onTap: widget.onCameraPressed, child: const Icon( Icons.camera_alt_outlined, color: Color(0xFF9E9E9E), // 浅灰色 size: 20, ), ), ), // 搜索按钮 if (widget.showSearchButton) Container( width: 80, height: 48, margin: const EdgeInsets.only(right: 1), decoration: const BoxDecoration( color: Colors.red, // 红色背景 borderRadius: BorderRadius.only( topRight: Radius.circular(7), bottomRight: Radius.circular(7), ), ), child: Material( color: Colors.transparent, child: InkWell( onTap: widget.onSearchPressed, borderRadius: const BorderRadius.only( topRight: Radius.circular(7), bottomRight: Radius.circular(7), ), child: const Center( child: Text( '搜索', style: TextStyle( color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500, ), ), ), ), ), ), ], ), ); } }

分类滚动栏：

import 'package:flutter/material.dart'; class Hmcategory extends StatefulWidget { const Hmcategory({super.key}); @override State<Hmcategory> createState() => _HmcategoryState(); } class _HmcategoryState extends State<Hmcategory> { @override Widget build(BuildContext context) { return SizedBox( height: 100, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: 10, itemBuilder: (BuildContext context, int index) { return Container( alignment: Alignment.center, width: 80, height: 100, margin: EdgeInsets.symmetric(horizontal: 10), color: Colors.blue, child: Text("分类$index", style: TextStyle(color: Colors.white)), ); }), ); } }