flutter - 一切都扩展到 Listview 内的屏幕宽度。我可以改变它吗？

Question

我正在尝试为我正在制作的应用设计聊天屏幕。为了使其可滚动，我将所有聊天消息都放在了一个 ListView 中。但是我放置在 ListView 中的所有内容都会水平扩展以匹配屏幕宽度(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

您可以使用 Align小部件将其子元素与父元素对齐。

只需将列表节点(Card 实例)包装在 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"),
            ),
          ),
        );
      },
    ));
  }
}