我正在尝试为我正在制作的应用程序设计聊天屏幕。
为了使其可滚动,我将所有聊天消息放置在列表视图中。但是我放置在列表视图中的所有内容都会水平扩展以匹配屏幕宽度(Listview 小部件的宽度)。我可以关闭此功能,以便可以将我的聊天消息排列到一侧,并将另一条聊天消息排列到另一侧,就像在 Whatsapp 中一样吗?只要我可以滚动,除了 ListView 解决方案之外的任何解决方案都可以
这就是现在的样子。
这是我当前页面的代码。我真的希望有人能帮助我解决这个问题。
import 'package:flutter/material.dart';
//import '../../Library/Library.dart';
//import '../../Ui/ChatMessage.dart';
class ChatScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ChatScreenState();
}
}
class ChatScreenState extends State<ChatScreen> {
bool overlayShouldBeVisible = false;
@override
Widget build(BuildContext context) {
return new Stack(
fit: StackFit.expand,
children: <Widget>[
new Scaffold(
appBar: new AppBar(
title: new Text(
'Chatroom name',
style: new TextStyle(
color: Colors.black,
),
),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new Container(
decoration: new BoxDecoration(
//image: new DecorationImage(image: new AssetImage('assets/backgroundChat.jpg',),fit: BoxFit.cover)
),
child: new ListView(
children: <Widget>[
new Text('Test'),
new Card(
color: Colors.green,
child: new Padding(
padding: new EdgeInsets.all(7.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text('Message'),
new Text('17:00'),
],
),
),
),
new Card(
color: Colors.green,
child: new Padding(
padding: new EdgeInsets.all(7.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text('Message'),
new Text('17:00'),
],
),
),
),
],
),
),
),
new Container(
height: 50.0,
color: Colors.white,
child: new Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Padding(
padding: new EdgeInsets.only(left: 20.0),
child: new TextField(),
),
),
new Material(
color: Colors.white,
child: new InkWell(
child: new Padding(
padding: new EdgeInsets.symmetric(horizontal: 20.0),
child: new Icon(
Icons.send,
color: Colors.blue,
),
),
onTap: () => print('send'),
),
),
],
),
),
],
),
),
//overlayShouldBeVisible == true ? new JsonLoader(): new Container(),
//Library.debugMode ? new DebugOverlay(): new Container(),
],
);
}
}