一切都会扩展到Listview内的screenwidth.我可以改变吗? [英] Everything expands to screenwidth inside a Listview. Can I change that?
问题描述
我正在尝试为正在制作的应用设计聊天屏幕. 为了使其滚动，我将所有聊天消息都放在了列表视图中.但是我放置在列表视图中的所有内容都会水平扩展以匹配屏幕宽度(Listview小部件具有的宽度).我可以关闭此功能，以便像在whatsapp中一样将聊天消息排列到一侧，而另一条聊天消息排到另一侧吗?只要可以滚动，除了ListView解决方案之外的其他任何东西都可以
I'm trying to make a design of a chat screen for an app that I'm making. To make it scrollable I placed all the chat messages inside a listview. But everything I place inside a list view expands horizontally to match screenwidth (Width that the Listview widget has). Can I turn this off so I can line out my chat messages to one side and the other chat message to the other side like in whatsapp? Anything other than a ListView solution is also alright as long as I can scroll
这就是现在的样子.
这是我当前页面的代码.我真的希望有人可以帮助我解决这个问题.
This is the code of my current page. I really hope someone can help me with this issue.
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(),
],
);
}
}
推荐答案
我对您的代码做了一些重构，结果如下:
I have done a little bit of refactor on your code an here is the result:
基本上，我会保留消息类型(已发送或已接收)的标记，并相应地对齐消息卡
请注意，我没有时间检查代码，但是我注意到很多不必要的嵌套，因此您可能需要稍微修改一下布局
class ChatScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ChatScreenState();
}
}
class ChatMessage extends StatelessWidget {
String type;
ChatMessage({this.type});
@override
Widget build(BuildContext context) {
return new Row(
mainAxisAlignment:
this.type == "sent" ? MainAxisAlignment.end : MainAxisAlignment.start,
children: <Widget>[
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'),
],
),
),
),
],
);
}
}
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 ChatMessage(
type: "sent",
),
new ChatMessage(
type: "sent",
),
new ChatMessage(
type: "received",
),
new ChatMessage(
type: "sent",
),
new ChatMessage(
type: "received",
),
new ChatMessage(
type: "received",
),
],
),
),
),
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(),
],
);
}
}
或如Rémi所建议的那样，您可以仅使用Align而不是Row
or as Rémi suggested you can just use Align instead of Row like so:
return new Align(
alignment:this.type!="sent"? FractionalOffset.centerLeft:FractionalOffset.centerRight,
child:
new Card(
..
这篇关于一切都会扩展到Listview内的screenwidth.我可以改变吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
