flutter 非常用组件整理第二篇

最新推荐文章于 2024-12-10 15:53:22 发布

独立开发者_猫哥

最新推荐文章于 2024-12-10 15:53:22 发布

阅读量856

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Flutter技巧文章标签： flutter

本文链接：https://blog.youkuaiyun.com/weixin_42320543/article/details/140678491

flutter 非常用组件整理第二篇

视频

https://youtu.be/fS_4ZxJvaX0

https://www.bilibili.com/video/BV1jS421R7vJ/

前言

原文 https://ducafecat.com/blog/lesser-known-flutter-widgets-02

本文是Flutter非常用组件第二篇，从开发者的视角出发,精选并深入剖析了AboutDialog、AnimatedGrid、Badge等鲜为人知却功能强大的隐藏组件,为读者提供了一份全面的Flutter UI组件使用指南。无论您是初学者还是有经验的开发者,相信本文都能为您的Flutter项目注入新的活力,助力打造出色的应用界面。

Flutter,UI组件,界面设计,隐藏组件,高级组件,应用开发

参考

https://docs.flutter.dev/ui/widgets

正文

AboutDialog

AboutDialog 组件用于显示应用程序的"关于"对话框。它通常包含应用程序的名称、版本、版权信息以及其他相关细节。让我们来看一个使用 AboutDialog 的例子:

import 'package:flutter/material.dart';

class WidgetPage extends StatefulWidget {
   
   
  const WidgetPage({
   
   super.key});

  @override
  State<WidgetPage> createState() => _WidgetPageState();
}

class _WidgetPageState extends State<WidgetPage> {
   
   
  Widget _mainView() {
   
   
    return Center(
      child: Column(
        children: [
          IconButton(
            icon: const Icon(Icons.info),
            onPressed: () {
   
   
              showAboutDialog(
                context: context,
                applicationName: '猫哥App',
                applicationVersion: '1.0.0',
                applicationIcon: Image.asset(
                  'assets/app_icon.png',
                  width: 100,
                ),
                applicationLegalese: '© 2024 Ducafecat. All rights reserved.',
              );
            },
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: const Text('非常用组件'),
      ),
      body: _mainView(),
    );
  }
}

showAboutDialog

点击后可以查看应用包使用详情，还是很有用的。

App Licenses

在这个例子中,我们创建了一个简单的 Flutter 应用程序,包含一个 AppBar 和一个居中的文本。在 AppBar 的操作图标中,我们添加了一个 IconButton,当点击时会显示 AboutDialog。

showAboutDialog() 函数用于显示 AboutDialog。我们为其提供了以下属性:

applicationName: 应用程序的名称
applicationVersion: 应用程序的版本号
applicationIcon: 应用程序的图标
applicationLegalese: 应用程序的版权信息

当用户点击 AppBar 上的信息图标时,AboutDialog 将显示应用程序的基本信息。这种对话框通常用于向用户提供有关应用程序的更多详细信息。

AboutListTile

AboutListTile 是一个 ListTile 组件的特殊版本,用于在应用程序的设置或信息页面上显示应用程序的"关于"信息。它结合了 AboutDialog 的功能,并将其集成到一个可以轻松添加到 ListView 中的 ListTile 小部件中。

下面是一个使用 AboutListTile 的例子:

import 'package:flutter/material.dart';

class WidgetPage extends StatefulWidget {
   
   
  const WidgetPage({
   
   super.key});

  @override
  State<WidgetPage> createState() => _WidgetPageState();
}

class _WidgetPageState extends State<WidgetPage> {
   
   
  Widget _mainView() {
   
   
    return ListView(
      children: [
        AboutListTile(
          icon: Image.asset(
            'assets/app_icon.png',
            width: 100,
          ),
          applicationName: '猫哥App',
          applicationVersion: '1.0.0',
          applicationIcon: Image.asset(
            'assets/app_icon.png',
            width: 100,
          ),
          applicationLegalese: '© 2024 Ducafecat. All rights reserved.',
          aboutBoxChildren: const [
            Text('This is a sample Flutter app.'),
            SizedBox(height: 8.0),
            Text('Developed by My Company.'),
          ],
        ),
        ListTile(
          title: const Text('Privacy Policy'),
          onTap: () {
   
   
            // Navigate to privacy policy page
          },
        ),
        ListTile(
          title: const Text('Terms of Service'),
          onTap: () {
   
   
            // Navigate to terms of service page
          },
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: const Text('非常用组件'),
      ),
      body: _mainView(),
    );
  }
}