如何在网格视图上添加垂直分隔线

Question

For your reference vertical divider in grid view

我们如何在带有垂直分隔线的网格视图项目上构建这样的 UI？？任何建议将不胜感激

Answer 1

使用 Divider Widget 并给出高度

或使用这个

VerticalDivider(
  color: Colors.black,
  thickness: 2,
)

Answer 2

试试下面的代码希望对你有帮助。

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Sole Material',
              ),
              subtitle: Text('Rubber'),
            ),
            ListTile(
              title: Text(
                'Material',
              ),
              subtitle: Text('Synthetic'),
            ),
            ListTile(
              title: Text(
                'Toe Shape',
              ),
              subtitle: Text('Round Toe'),
            ),
          ],
        ),
      ),
      Expanded(
        child: VerticalDivider(
          //width: 5,
          color: Colors.black,
        ),
      ),
      Expanded(
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Pattern',
              ),
              subtitle: Text('Textured'),
            ),
            ListTile(
              title: Text(
                'Occasion',
              ),
              subtitle: Text('Day'),
            ),
          ],
        ),
      ),
    ],
  ),
),

结果屏幕->

如何在网格视图上添加垂直分隔线

How to add Vertical Divider on Grid View

flutter

flutter-layout