flutter 自适应宽高气泡框，聊天气泡框

**Flutter 自适应宽高气泡框**

在 Flutter 中，创建一个自适应宽高的气泡框是非常有用的功能。气泡框可以用来显示信息、提示用户或展示一些重要的内容。在本文中，我们将学习如何使用 Flutter 创建一个自适应宽高的气泡框。

**气泡框的基本结构**

气泡框通常由以下几个部分组成：

* **背景色**:气泡框的背景颜色。
* **边框**:气泡框的边框样式和颜色。
* **内容**:气泡框中显示的信息或控件。

**创建自适应宽高的气泡框**

要创建一个自适应宽高的气泡框，我们需要使用 Flutter 的 `Container` widget 和 `Padding` widget。下面是示例代码：

dartimport 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget {
 final String text;
 final bool isSender;

 const ChatBubble({Key? key, required this.text, required this.isSender}) : super(key: key);

 @override Widget build(BuildContext context) {
 return Align(
 alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
 child: Container(
 padding: EdgeInsets.all(10),
 margin: EdgeInsets.all(5),
 decoration: BoxDecoration(
 color: isSender ? Colors.blue[100] : Colors.grey[200],
 borderRadius: BorderRadius.circular(10),
 border: Border.all(color: Colors.grey[300], width:1),
 ),
 child: Text(text, style: TextStyle(fontSize:16)),
 ),
 );
 }
}

在上面的代码中，我们使用 `Align` widget 来将气泡框对齐到屏幕的右边或左边。然后我们使用 `Container` widget 来创建气泡框的背景色和边框样式。

**自适应宽高**

要使气泡框自适应宽高，我们需要在 `build` 方法中使用 `LayoutBuilder` widget。下面是示例代码：

dartimport 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget {
 final String text;
 final bool isSender;

 const ChatBubble({Key? key, required this.text, required this.isSender}) : super(key: key);

 @override Widget build(BuildContext context) {
 return LayoutBuilder(
 builder: (context, constraints) {
 double width = constraints.maxWidth;
 double height = constraints.maxHeight;

 return Align(
 alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
 child: Container(
 padding: EdgeInsets.all(10),
 margin: EdgeInsets.all(5),
 decoration: BoxDecoration(
 color: isSender ? Colors.blue[100] : Colors.grey[200],
 borderRadius: BorderRadius.circular(10),
 border: Border.all(color: Colors.grey[300], width:1),
 ),
 child: Text(text, style: TextStyle(fontSize:16)),
 ),
 );
 },
 );
 }
}

在上面的代码中，我们使用 `LayoutBuilder` widget 来获取屏幕的最大宽度和高度。然后我们将这些值传递给气泡框的 `Container` widget。

**总结**

在本文中，我们学习了如何使用 Flutter 创建一个自适应宽高的气泡框。我们使用 `Align` widget 和 `LayoutBuilder` widget 来对齐气泡框并使其自适应屏幕的最大宽度和高度。通过这些示例代码，你可以轻松地在你的 Flutter 应用中创建自适应宽高的气泡框。

**参考**

* [Flutter 官方文档]( />* [Flutter GitHub仓库]( />
如果你有任何问题或建议，请随时告诉我。