Flutter：GridPaper 示例

昨天給大家介紹了你想好，如何為你的應(yīng)用做推廣了嗎？

收到了好多讀者的喜歡，今天繼續(xù)帶來干貨

介紹

在日常生活中，我們會看到很多帶有網(wǎng)格線的物體，比如白板、筆記本。作文紙等或者照片編輯相關(guān)的移動應(yīng)用程序、軟件和網(wǎng)站中，我們也看到了網(wǎng)格線的出現(xiàn)。在 Flutter 中，我們可以使用名為GridPaper的內(nèi)置小部件來創(chuàng)建網(wǎng)格線。網(wǎng)格將繪制在 GridPaper 的子節(jié)點上。

下面的示例演示了如何在 Flutter 應(yīng)用程序中動態(tài)顯示或隱藏網(wǎng)格線。

示例預(yù)覽

我們要構(gòu)建的應(yīng)用程序包含一個開關(guān)和一個帶有文本的黃色容器。該開關(guān)用于控制網(wǎng)格線的可見性。

為了使網(wǎng)格線變得不可見，我們將它們的顏色設(shè)置為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), ), ), ), ), ); } }

您可以在官方文檔中找到有關(guān) GridPaper 小部件的構(gòu)造函數(shù)和屬性的更多信息。

結(jié)論

我們已經(jīng)完成了一個簡單但有意義的實現(xiàn) GridPaper 小部件的示例。如果您想在 Flutter 中探索更多新奇有趣的東西，

請關(guān)注我，我也會在后面繼續(xù)給大家?guī)砭蕛?nèi)容。

最后如果可以的話，給我們開源點個star

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

Android Dart Flutter

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。