Question

我正在尝试创建聊天气泡，并且找到了我要修改的代码段。我已经走得很远了，但是无法使气泡包裹在文本周围。我确实找到了Wrap text in container without using a fixed width in Flutter，并遵循了那里的想法，但是它们对我没有用。谁能提供一些见识？

该图像显示了我使用以下代码得到的结果，但是如上所述，我希望气泡能包裹文本，除非需要，否则不要完全延伸到边缘。

class Bubble extends StatelessWidget {
  Bubble(
      {this.author, this.message, this.time, this.delivered, this.isEmployee});
  final String message, time, author;
  final delivered, isEmployee;
  @override
  Widget build(BuildContext context) {
    final rowAlignment =
        isEmployee ? MainAxisAlignment.start : MainAxisAlignment.end;
    final bg =
        isEmployee ? Colors.greenAccent.shade100 : Colors.blueAccent.shade100;
    final align =
        isEmployee ? CrossAxisAlignment.start : CrossAxisAlignment.end;
    final icon = delivered ? Icons.done_all : Icons.done;
    final radius = isEmployee
        ? BorderRadius.only(
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(5.0),
          )
        : BorderRadius.only(
            topLeft: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(10.0),
          );
    return Column(
      crossAxisAlignment: align,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.all(3.0),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  blurRadius: .5,
                  spreadRadius: 1.0,
                  color: Colors.black.withOpacity(.12))
            ],
            color: bg,
            borderRadius: radius,
          ),
          child: Column(
            crossAxisAlignment: align,
            children: <Widget>[
              Text(author, style: TextStyle(fontWeight: FontWeight.bold)),
              Text(message),
              Row(mainAxisAlignment: rowAlignment, children: <Widget>[
                Text(time,
                    style: TextStyle(
                      color: Colors.black38,
                      fontSize: 10.0,
                    )),
                SizedBox(width: 3.0),
                Icon(
                  icon,
                  size: 12.0,
                  color: Colors.black38,
                )
              ])
            ],
          ),
        )
      ],
    );
  }
}

Answer 1

在class EntityView(ModelView): can_delete = True can_edit = True can_view_details = True can_create = True can_export = True # No such or similar attribute! database_alias = SECOND_DB_ALIAS def __init__(self): super().__init__(Entity, name="Entities") admin = Admin(app, name='Admin Panel', template_mode='bootstrap3') admin.add_view(EntityView())小部件中包装第一个Column。

FittedBox

Answer 2

您可以将mainAxisSize上的Row设置为ManAxisSize.min

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: rowAlignment,
  children: <Widget>[
    Text(
      time,
      style: TextStyle(
        color: Colors.black38,
        fontSize: 10.0,
      ),
    ),
    SizedBox(width: 3.0),
    Icon(
      icon,
      size: 12.0,
      color: Colors.black38,
    ),
  ],
);

容器文字换行

2 个答案: