Flutter（GridPaper 示例#yyds干货盘点#） _Flutter

知是行的主意,行是知的功夫。这篇文章主要讲述Flutter：GridPaper 示例#yyds干货盘点#相关的知识，希望能为你提供帮助。
Flutter：GridPaper 示例

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

昨天给大家介绍了??你想好，如何为你的应用做推广了吗？??收到了好多读者的喜欢，今天继续带来干货
介绍在日常生活中，我们会看到很多带有网格线的物体，比如白板、笔记本。作文纸等或者照片编辑相关的移动应用程序、软件和网站中，我们也看到了网格线的出现。在 Flutter 中，我们可以使用名为GridPaper的内置小部件来创建网格线。网格将绘制在 GridPaper 的子节点上。下面的示例演示了如何在 Flutter 应用程序中动态显示或隐藏网格线。
示例预览
我们要构建的应用程序包含一个开关和一个带有文本的黄色容器。该开关用于控制网格线的可见性。为了使网格线变得不可见，我们将它们的颜色设置为Colors.transparent。
代码main.dart 中的完整源代码及详细解释：

// main.dart
import 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,
// GridPapers child
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.yellow.shade200,
child: const Center(
child: Text(
ABC,
style: TextStyle(fontSize: 150),
),
),
),
),
);

您可以在??官方文档中??找到有关 GridPaper 小部件的构造函数和属性的更多信息。
结论【Flutter（GridPaper 示例#yyds干货盘点#）】我们已经完成了一个简单但有意义的实现 GridPaper 小部件的示例。如果您想在 Flutter 中探索更多新奇有趣的东西，请关注我，我也会在后面继续给大家带来精彩内容。最后如果可以的话，给我们开源点个starhttps://github.com/flipped-aurora/gin-vue-admin