flutter - 如何在 flutter 中绘制动态高度线?

标签 flutter dart flutter-layout

我想画一条动态高度线,如下图所示 as shown here, grey line

我使用带有单边边框的容器做了一些事情

Container(
child:(content goes here....)
  margin: EdgeInsets.symmetric(horizontal:16+20.0),
   decoration: BoxDecoration(
          border: Border(
            left: BorderSide(width: 2.0, color: Colors.lightBlue.shade600),

                      ),
          color: Colors.white,
        ),
)

但问题是线条的角(顶部和底部)没有圆角。
我想在帖子的左侧画一条垂直线,右侧是内容。

最佳答案

你可以尝试这样的事情:

IntrinsicHeight(
  child: Row(
    children: [
      Container(
        width: 5,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          color: const Color(0x7f9e9e9e),
        ),
      ),
      Expanded(child: **content goes here**),
    ],
  ),
)

这里有一个 DartPad 示例:Example

这会产生这样的东西:

enter image description here

左边的栏会根据右边的内容自动调整大小。

关于flutter - 如何在 flutter 中绘制动态高度线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68255674/

相关文章:

ios - 发送Http.MultipartRequest作为 flutter 数组?

flutter - Navigator 或 SlideTransition 用于从下到上显示屏幕

dart - Flutter:继承的 Widget 和路由

java - VSCode Flutter工程如何设置才能正确解析Android文件夹中的Java代码?

canvas - 神秘 flutter 警告 : Element is implicitly hidden?

flutter - 如何在 Flutter/Dart 中获取系统时间格式(24 或 12 AM/PM)?

flutter - 我应该如何告诉 flutter 我的应用程序需要在外部重建?

dart - 存在prefixIcon时如何设置FormTextField的高度

dart - 运行窗口消息 'Identical line'

flutter - 如何仅添加一个 BottomNavigationBarItem