Question

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

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),
            ),
          ),
        ),
      );
    }

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

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

Answer 1

第一个框的右边界正碰到第二个框的左边界，依此类推。结果，您的边界被合并了。为避免这种情况，请确保只有一个边界。

使用它作为您的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),
    )

创建没有重叠边框的盒子行

1 个答案: