复杂的边框线设计

Question

我想创建一个像这样的图像的动态网格视图。

但是我面临着这种类型的线条边框的问题。有什么方法可以初始化容器边框的开始和结束位置吗？否则构建这个 UI 的最佳方法是什么？

Answer 1

我完成了

Wrap()

小部件。这是我的虚拟列表 []，这是我的代码

 final List<String> items = [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
      'Item 5'
    ];



Wrap(
  runAlignment: WrapAlignment.start,
  crossAxisAlignment: WrapCrossAlignment.end,
  alignment: WrapAlignment.start,
  spacing: 0,
  runSpacing: 0,
  children: items.map((item) {
    final index = items.indexOf(item);
    final isOdd = index.isOdd;
    final isEven = index.isEven;
    final isLastItem = index == items.length - 1;

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          alignment: Alignment.center,
          width: (Get.width - 112.w) / 2,
          height: (Get.width - 144.w) / 2,
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          decoration: BoxDecoration(
            border: Border(
              left: isOdd ? BorderSide(width: 0.5, color: borderColor) : BorderSide.none,
              right: isEven ? BorderSide(width: isLastItem ? 1.0 : 0.5, color: borderColor) : BorderSide.none,
            ),
          ),
          child: Center(child: Text("$item, ")),
        ),
        if (!isLastItem)
          SizedBox(
            width: (Get.width - 112.w) / 2,
            child: Divider(
              endIndent: 16.w,
              indent: 16.w,
              height: 32.h,
              thickness: 1.0,
              color: borderColor,
            ),
          ),
      ],
    );
  }).toList(),
)