Flutter：GridPaper 示例

昨天给大家介绍了你想好，如何为你的应用做推广了吗？

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

介绍

在日常生活中，我们会看到很多带有网格线的物体，比如白板、笔记本。作文纸等或者照片编辑相关的移动应用程序、软件和网站中，我们也看到了网格线的出现。在 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 { 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), ), ), ), ), ); } }

您可以在官方文档中找到有关 GridPaper 小部件的构造函数和属性的更多信息。

结论

我们已经完成了一个简单但有意义的实现 GridPaper 小部件的示例。如果您想在 Flutter 中探索更多新奇有趣的东西，

请关注我，我也会在后面继续给大家带来精彩内容。

最后如果可以的话，给我们开源点个star

https://github.com/flipped-aurora/gin-vue-admin

Android Dart Flutter

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。