如何在Flutter中实现指定聊天界面？求助完善AppBar、文本框

一、扩展AppBar功能 #

你可以通过AppBar的actions属性添加右侧操作图标，同时自定义标题区域，把单纯的文本换成包含头像、用户名、在线状态的组合组件：

二、实现底部文本输入框 #

将原来的悬浮麦克风按钮替换成带输入框的底部栏，同时调整body结构，让消息列表区域占满剩余空间，输入栏固定在底部。

以下是修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(color: Color.fromRGBO(0, 0, 0, 1.0)),
      ),
      home: const MyHomePage(title: 'Person'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _messageController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        // 自定义标题区域：头像+用户名+在线状态
        title: Row(
          children: [
            const CircleAvatar(
              backgroundImage: AssetImage('images/avatar.png'), // 替换成你的头像资源
              radius: 18,
            ),
            const SizedBox(width: 12),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.title,
                  style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                ),
                const Text(
                  '在线',
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
              ],
            ),
          ],
        ),
        // 添加右侧操作图标
        actions: [
          IconButton(
            icon: const Icon(Icons.search, color: Colors.white),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.more_vert, color: Colors.white),
            onPressed: () {},
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: Column(
        children: [
          // 消息列表区域，占满剩余空间
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/background.png'),
                  fit: BoxFit.cover,
                ),
              ),
              // 这里可以后续添加消息气泡列表
              child: const Center(child: Text('消息列表')),
            ),
          ),
          // 底部输入栏
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: const BoxDecoration(color: Colors.white),
            child: Row(
              children: [
                IconButton(
                  icon: const Icon(Icons.emoji_emotions, color: Colors.grey),
                  onPressed: () {},
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration: const InputDecoration(
                      hintText: '输入消息...',
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                      filled: true,
                      fillColor: Color.fromRGBO(240, 240, 240, 1),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton(
                  icon: const Icon(Icons.send, color: Colors.black),
                  onPressed: () {
                    // 发送消息逻辑
                    if (_messageController.text.isNotEmpty) {
                      print('发送消息：${_messageController.text}');
                      _messageController.clear();
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _messageController.dispose();
    super.dispose();
  }
}

关键修改说明： #

• AppBar部分：使用Row自定义标题，加入头像和在线状态文本；通过actions添加搜索、更多选项图标。
• 输入框部分：用Column+Expanded布局，让消息列表占满屏幕剩余空间，底部固定输入栏；添加TextField实现消息输入，搭配表情、发送按钮。
• 资源注意：确保images/avatar.png和images/background.png已添加到项目的pubspec.yaml资源配置中。

内容的提问来源于stack exchange，提问作者Mohmed Ashraf