Listview中的所有内容都扩展为screenwidth。我可以改变吗？

Question

我正在尝试为我正在制作的应用程序设计聊天屏幕。为了使其可滚动，我将所有聊天消息放在listview中。但是我放在列表视图中的所有内容都会水平扩展以匹配screenwidth（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(),
            ],
        );
    }
}

Answer 1

我在你的代码上做了一点重构，结果如下：

基本上我为消息类型（发送或接收）保留一个标志，并相应地对齐消息卡

注意我没有时间查看代码，但我注意到了很多不必要的嵌套，所以你可能想稍微修改一下布局

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(),
      ],
    );
  }
}

或者如雷米建议你可以像这样使用Align而不是Row：

return new Align(
      alignment:this.type!="sent"?  FractionalOffset.centerLeft:FractionalOffset.centerRight,
                  child: 
                    new Card(
    ..

Answer 2

您可以使用Align小部件将其子对象放在其父级中。

只需将列表节点（卡实例）包装在Align中。

 import 'package:flutter/material.dart';
//import '../../Library/Library.dart';
//import '../../Ui/ChatMessage.dart';

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

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 Scaffold(body: new ListView.builder(
      itemBuilder: (context, index) {
        return new Align(
          alignment: index.isEven ? Alignment.centerLeft : Alignment.centerRight,
          child: new Card(
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Text("Hello World $index"),
            ),
          ),
        );
      },
    ));
  }
}