使用Flutter写一个聊天App的发送消息界面
时间: 2023-07-20 09:16:53 浏览: 47
好的,以下是使用Flutter编写发送消息界面的示例代码:
```dart
import 'package:flutter/material.dart';
class SendMessageScreen extends StatefulWidget {
@override
_SendMessageScreenState createState() => _SendMessageScreenState();
}
class _SendMessageScreenState extends State<SendMessageScreen> {
final TextEditingController _textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('发送消息'),
),
body: SafeArea(
child: Column(
children: [
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Color(0x22000000),
blurRadius: 8,
offset: Offset(0, 2),
),
],
),
child: TextField(
controller: _textEditingController,
maxLines: null,
decoration: InputDecoration(
hintText: '请输入消息内容',
border: InputBorder.none,
),
style: TextStyle(
fontSize: 16,
),
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
// 在这里编写发送消息的逻辑
final message = _textEditingController.text;
print('发送消息:$message');
_textEditingController.clear();
},
child: Text('发送'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.symmetric(vertical: 16),
),
),
),
),
],
),
),
);
}
}
```
这个界面由一个 `TextField` 和一个 `ElevatedButton` 组成,用户在 `TextField` 中输入消息内容,点击 `ElevatedButton` 发送消息。
注意,这只是一个示例代码,你需要根据你的具体需求进行修改。