​

作者:坚果

公众号:"大前端之旅"

 

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

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

介绍

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

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

示例预览

Flutter:GridPaper 示例【新年快乐】_ide

Flutter:GridPaper 示例【新年快乐】_ide_02

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

为了使网格线变得不可见,我们将它们的颜色设置为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,
       // GridPaper's child
       child: Container(
         alignment: Alignment.center,
         width: double.infinity,
         height: double.infinity,
         color: Colors.yellow.shade200,
         child: const Center(
           child: Text(
             '新年快乐',
             style: TextStyle(fontSize: 150, color: Colors.red),
          ),
        ),
      ),
    ),
  );
}
}

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

结论

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

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

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

github.com/flipped-aur…

\