如何制作带边框的 listView 产品表项目答案

【问题标题】：How to make listView Product Table item with Border如何制作带边框的 listView 产品表项目
【发布时间】：2023-01-12 13:03:51
【问题描述】：

请问如何在列表视图中制作带有边框的产品项目表像这张图片：

我做到了，但在中间，我有两条边界线。我只需要一个。

【问题讨论】：

您应该添加一些条件语句来删除右边框，除了行中的最后一个元素

标签： flutter

【解决方案1】：

输出中出现两个边框/分隔线的原因是每次渲染左右边框时。由于您想从左向右滚动，因此需要通过给出条件在列表末尾显示一次右边框：-

right: index == numberList.length - 1 // Display right border at the end of the list
? const BorderSide(
    color: Colors.black,
    width: 1.0,
  )
: BorderSide.none,

完整代码：-

import 'package:flutter/material.dart';

void main() {
  runApp(const RightBorder());
}

class RightBorder extends StatefulWidget {
  const RightBorder({super.key});

  @override
  _RightBorderState createState() => _RightBorderState();
}

// dynamic setState;

class _RightBorderState extends State<RightBorder> {
  List numberList = [1, 2, 3, 4, 5, 6];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Border'),
        ),
        body: Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: numberList.length,
              itemBuilder: (buildContext, index) {
                return Center(
                  child: Container(
                    height: 100,
                    width: 200,
                    decoration: BoxDecoration(
                      border: Border(
                        right: index == numberList.length - 1
                            ? const BorderSide(
                                color: Colors.black,
                                width: 1.0,
                              )
                            : BorderSide.none,
                        top: const BorderSide(
                          color: Colors.black,
                          width: 1.0,
                        ),
                        bottom: const BorderSide(
                          color: Colors.black,
                          width: 1.0,
                        ),
                        left: const BorderSide(
                          color: Colors.black,
                          width: 1.0,
                        ),
                      ),
                    ),
                    child: Center(child: Text('$index')),
                  ),
                );
              }),
        ),
      ),
    );
  }
}

输出： -

【讨论】：