flutter 聊天输入框底部的添加附件 图片视频

在 Flutter 中，你可以使用 `Stack` 和 `Column` 组件来创建一个聊天输入框底部带有附件的布局。以下是一个示例代码：

import 'package:flutter/material.dart';

class ChatInputBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '输入消息...',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.attach_file),
            onPressed: () {
              // 处理附件的逻辑
              // 这里可以打开图片选择器或者视频选择器，选择完成后进行处理
            },
          ),
        ],
      ),
    );
  }
}

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                // 聊天消息列表
              ],
            ),
          ),
          ChatInputBox(), // 聊天输入框
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: ChatScreen(),
  ));
}

在上面的代码中，`ChatInputBox` 组件包含一个 `TextField` 和一个附件添加按钮。你可以根据需要自定义输入框的样式和附件的处理逻辑。在 `onPressed` 回调中，你可以打开图片选择器或者视频选择器，并在选择完成后进行相应