Flutter：GridPaper 示例

作者：坚果

2022 年 1 月 11 日
本文字数：1460 字
阅读完需：约 5 分钟

作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。

收到了好多读者的喜欢，今天继续带来干货

介绍

在日常生活中，我们会看到很多带有网格线的物体，比如白板、笔记本。作文纸等或者照片编辑相关的移动应用程序、软件和网站中，我们也看到了网格线的出现。在 Flutter 中，我们可以使用名为 GridPaper 的内置小部件来创建网格线。网格将绘制在 GridPaper 的子节点上。

下面的示例演示了如何在 Flutter 应用程序中动态显示或隐藏网格线。

示例预览

我们要构建的应用程序包含一个开关和一个带有文本的黄色容器。该开关用于控制网格线的可见性。

为了使网格线变得不可见，我们将它们的颜色设置为 Colors.transparent。

代码

main.dart 中的完整源代码及详细解释：

// main.dartimport 'package:flutter/material.dart';
void main() {  runApp(const MyApp());}
class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);
  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: '大前端之旅小课堂',      theme: ThemeData(        primarySwatch: Colors.indigo,      ),      home: const HomePage(),    );  }}
class HomePage extends StatefulWidget {  const HomePage({Key? key}) : super(key: key);
  @override  _HomePageState createState() => _HomePageState();}
class _HomePageState extends State<HomePage> {  bool _isSHown = true;
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('大前端之旅小课堂'),        actions: [          Switch(              activeColor: Colors.white,              activeTrackColor: Colors.yellow,              value: _isSHown,              onChanged: (_) {                setState(() {                  _isSHown = !_isSHown;                });              })        ],      ),      body: GridPaper(        // Set the color of the lines        color: _isSHown ? Colors.black54 : Colors.transparent,        // The number of major divisions within each primary grid cell        divisions: 2,        // The number of minor divisions within each major division, including the major division itself        subdivisions: 2,        // GridPaper's child        child: Container(          width: double.infinity,          height: double.infinity,          color: Colors.yellow.shade200,          child: const Center(            child: Text(              'ABC',              style: TextStyle(fontSize: 150),            ),          ),        ),      ),    );  }}