我目前正在处理颤振上的聊天应用程序界面。我尝试使用以下容器自定义聊天消息,以在每条消息旁边显示一条垂直线,就像 Snapchat 一样:
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
alignment: Alignment.centerRight,
width: 300.0,
child: new Text(text),
),
new Container(width: 2.0, height: 10.0, color: Colors.amber, child: null)
],
),
)
Run Code Online (Sandbox Code Playgroud)
问题是,这个:
新容器(宽度:2.0,高度:10.0,颜色:Colors.amber,child:null)
当我指定一个明确的高度时,比如上面的 10.0,它不会随着消息缩放,它只是像这样停留在顶部:
所以我想知道是否有一种方法可以随着消息 Text 的另一个容器的高度增加而动态缩放行(容器)的高度。
虽然 Darky 的答案是正确的,但在您的情况下,您不需要知道容器尺寸。一个更简单的方法是在容器的右侧有一个边框。
例如:
new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(
width: 2.0,
color: Colors.amber,
),
),
),
child: new Text('Hello World!'),
);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
10326 次 |
| 最近记录: |