时间戳

首页 > 解决方案 > 创建没有重叠边框的框行

flutter - 创建没有重叠边框的框行

问题描述

这是我目前拥有的

我想创建上面的内容，但分隔数字的线条应该与顶部和底部边框的粗细相同。我的代码：

for (int i = 0; i < times.length; i++) {
      timeHeader.add(
        new Container(
          height: 35,
          width: 72,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.grey[400],
            border: Border.all(
              color: Colors.black,
              //width: 2,
            ),
          ),
          child: Center(
            child: Text(
              '${times[i].header_text}',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      );
    }

我将它存储为 aList<Widget>因为我将它显示在双向可滚动列表视图中（ListView嵌套在 aSingleChildScrollView中，内部列表视图的第一个元素作为一行，见下文）

if (index == 0) {
    return Row(
        children: timeHeader,
    );
}

标签： flutter

解决方案

第一个框的右边框与第二个框的左边框相接触，依此类推。结果，您的边界正在合并。为避免这种情况，请确保您只有一个并排的边框。

使用它作为你BoxDecoration的边界，而不是：

i == times.length - 1
  ? Border.all(color: Colors.black)
  : Border(
      bottom: BorderSide(color: Colors.black),
      left: BorderSide(color: Colors.black),
      top: BorderSide(color: Colors.black),
    )

推荐阅读