Question

我正在尝试在Flutter中创建一个基本的聊天应用程序，我想将对话显示在简单的容器中，以使其长度适合于内部文本。当出现溢出错误时，一切工作正常，直到文本不适合容器的长度为止。

我正在使用的代码就是这个

Widget _buildMessage(Message message) {
    return Row(children: <Widget>[
      message.author == username ? Expanded(child: Container()) : Container(),
      Container(
          padding: EdgeInsets.all(8.0),
          margin: EdgeInsets.all(4.0),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(8.0))),
          child: Row(
            children: <Widget>[
              Text(
                message.text,
              ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.time,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                ),
              ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.author,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                ),
              ),
            ],
          )),
      message.author != username ? Expanded(child: Container()) : Container(),
    ]);
  }

我正在使用“行中的行”，以便根据作者的不同将其对齐。如果在输入中键入带有多行的内容，则文本将正确呈现，容器将根据需要垂直扩展。问题是当我键入的内容超出容器的宽度时。

我可以通过以下方式解决此问题：将“文本”与“容器”一起包装，然后用“ fixed”包装，但是我不希望这样，因为我希望宽度是动态的并适应文本。

我还看到了其他一些人们建议使用“灵活”或“扩展”的问题，但是我不知道该怎么做。

任何想法都会受到赞赏。

Answer 1

我试图编辑您的代码，这就是我所做的：

return Row(
  mainAxisAlignment: message.author == username ? MainAxisAlignment.end : MainAxisAlignment.start,
  //this will determine if the message should be displayed left or right
  children: [
    Flexible(
    //Wrapping the container with flexible widget
      child: Container(
        padding: EdgeInsets.all(8.0),
        margin: EdgeInsets.all(4.0),
        decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8.0))),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
            //We only want to wrap the text message with flexible widget
              child: Container(
                child: Text(
                  message.text,
                  )
                )
              ),    
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.time,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                  ),
                ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.author,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                  ),
                ),
              ],
            )),

           )

        ]
        );

这是我的伪代码的完整版本：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

List<String> username = ['foo', 'bar', 'foo', 'bar', 'foo'];
List<String> messages = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 'bb', 'cccccccccccccccccccccccccccccc', 'dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd', 'ee'];
List<String> time = ['131', '6454', '54564', '54546', '88888'];
List<String> author = ['Jesus', 'Joseph', 'Mary', 'John', 'Cardo'];

@override
Widget build(BuildContext context){

return Scaffold(
  body: Container(
    color: Colors.blue[200],
    child: ListView.builder(
      itemCount: 5, 
      itemBuilder: (_, int index){

        return  Row(
          mainAxisAlignment: username[index] == "foo" ? MainAxisAlignment.end : MainAxisAlignment.start,
          children: [
            Flexible(
              child: Container(
                padding: EdgeInsets.all(8.0),
                margin: EdgeInsets.all(4.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.0))),
                child: Row(

                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    Flexible(
                      child: Container(
                        child: Text(
                          messages[index],
                        ),
                      )
                    ),

                    SizedBox(
                      width: 8.0,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 6.0),
                      child: Text(
                        time[index],
                        style: TextStyle(fontSize: 10.0, color: Colors.grey),
                      ),
                    ),
                    SizedBox(
                      width: 8.0,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 6.0),
                      child: Text(
                        author[index],
                        style: TextStyle(fontSize: 10.0, color: Colors.grey),
                      ),
                    ),
                  ],
                )),

              )

          ]
          );

      }
      ) 
      )
    );
  }
}

在容器中换行而不在Flutter中使用固定宽度

1 个答案: