Flutter：GridPaper 示例【新年快乐】-阿里云开发者社区

Flutter：GridPaper 示例【新年快乐】

2022-01-30 166

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 昨天给大家介绍了你想好，如何为你的应用做推广了吗？收到了好多读者的喜欢，今天继续带来干货

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

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

介绍

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