具有水平和垂直中心对齐分隔线的 GridView答案

【问题标题】：GridView with Horizontal and Vertical center align dividers具有水平和垂直中心对齐分隔线的 GridView
【发布时间】：2018-12-14 02:42:08
【问题描述】：

我正在尝试绘制如下图所示的分隔线。

我正在考虑水平添加 5 列，并使用 1 dp 线使分隔列更小。然而，在 Flutter 中，所有列的宽度似乎或可能是我错了。

如何绘制如下图所示的行和列分隔符？

这是我正在使用的代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
   @override
Widget build(BuildContext context) {
 
  Widget gridSection = Expanded(
    flex: 1,
    child: GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 1.0,
      shrinkWrap:true,
      mainAxisSpacing: 2.0,      
      crossAxisSpacing: 2.0,
      padding: const EdgeInsets.all(4.0),
      children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
  );
 
  Widget body = Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      gridSection,
    ],
  );
 
  return Scaffold(
    appBar: AppBar(
      title: Text("Example 2 Page"),
    ),
    body: Padding(
      padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0),
      child: body,
    ),
  );
}
}

【问题讨论】：

为什么不在这里使用网格？
已经是束带了。
你能链接一些代码吗？目前还不清楚你目前拥有什么。
对不起，我已经用代码更新了问题
同stackoverflow.com/questions/12109126/…

标签： dart flutter flutter-layout

【解决方案1】：

我知道为时已晚，但我认为您可以使用 Stack 实现（或实现），线条可以是静态图像，网格位于其上方

【讨论】：

【解决方案2】：

我会生成使用List.generate 的GridView 孩子，并根据孩子的索引用不同的边框扭曲每个孩子。

您的GridView 应该如下所示：

  Widget getGridView() {
    return GridView.count(
      crossAxisCount: 3,
      shrinkWrap: true,
      children: List.generate(listOfPictures.length, (index) {
        return getWarppedPicture(
            listOfPictures[index], index, listOfPictures.length);
      }),
    );
  }

getWarppedPicture 函数应该是这样的：

  Widget getWarppedPicture(element, int index, totalLegth) {
    int tempIndex = index + 1;

    // if bottomRigth
    if (tempIndex % 3 == 0 && tempIndex + 3 >= totalLegth) {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: Image.network(element.picPath).image,
          ),
        ),
      );
    }

    // if bottom
    if (tempIndex + 3 >= totalLegth) {
      return Row(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 50,
              width: 1,
            ),
          ),
        ],
      );
    }

    // if rigth
    if (index % 3 == 0) {
      Column(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 1,
              width: 50,
            ),
          ),
        ],
      );
    }
    
    // all the rest
    return Column(
      children: [
        Row(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: Image.network(element.picPath).image,
                ),
              ),
            ),
            Center(
              child: Container(
                height: 50,
                width: 1,
              ),
            ),
          ],
        ),
        Center(
          child: Container(
            height: 1,
            width: 50,
          ),
        ),
      ],
    );
  }

我决定默认的扭曲将是元素底部和右侧的边框。

草图描述了每个索引及其边界条件：

享受吧！ ;)

【讨论】：