当前位置:   article > 正文

Flutter中的FlutterLogo组件_flutter logo

flutter logo

目录

前言

一、FlutterLogo简介

二、FlutterLogo用法


前言

    今天在查看Flutter源码的时候,发现了一个有意思的组件FlutterLogo.顺便调用了一下发现挺有意思的,代码以及实现比较简单,新手阅读源码的话,可以看下这个Widget的内部实现,用它练练手。

一、FlutterLogo简介

        文档对这个widget的介绍比较简单:Flutter是一个widget,用来展示Flutter的logo。这个Widget遵循IconTheme。

二、FlutterLogo用法

        默认情况下,FlutterLogo的尺寸是大小是24。

        我们可以通过代码看下默认显示的效果。例如我们通过下面的代码展示一个居中的FlutterLogo.效果图如图1所示:

  1. import 'package:flutter/material.dart';
  2. class MyHomePage extends StatefulWidget {
  3. const MyHomePage({super.key, required this.title});
  4. final String title;
  5. @override
  6. State<MyHomePage> createState() => _MyHomePageState();
  7. }
  8. class _MyHomePageState extends State<MyHomePage> {
  9. @override
  10. Widget build(BuildContext context) {
  11. return Scaffold(
  12. appBar: AppBar(
  13. title: const Text('FlutterLogo'),
  14. ),
  15. body: const Center(
  16. child: FlutterLogo(),
  17. ), // This trailing comma makes auto-formatting nicer for build methods.
  18. );
  19. }
  20. }

        图1.居中显示的FlutterLogo        

        默认情况下FlutterLogo的大小为24,FlutterLogo的大小是通过改变size来改变FlutterLogo的大小。

        FlutterLogo还有一个textColor属性,我们可以通过改变textColor属性,来改变文字的颜色,当然默认情况下只改变textColor是看不到文字的,因为FlutterLogo还有一个style属性,来控制FlutterLogo的显示样式的。默认情况下,Flutter是只显示图标不显示文字的。默认情况下,style的属性值是makeOnly,这个时候只显示图标,当我们把style设置成horizontal的时候,左边显示Flutter的图标,右边显示文字。当style设置成stacked的时候,上面显示Flutter的logo,下方显示Flutter文字。下面写一个Demo,展示了更改style属性之后Flutter的显示效果。

        

         图2.通过设置style改变FlutterLogo文字和图标的显示效果

        当我们把style的属性设置成horizontal或者stacked的时候,再次设置textColor,文字颜色就生效了。

        Flutterlogo也是支持动画效果的,duration属性控制动画时长,curve属性控制动画效果的曲线。默认情况下duration是0.75秒,curve的默认值是Curves.fastOutSlowIn。有兴趣的话,可以改变下这两个属性的值看下显示效果。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/549321
推荐阅读
相关标签
  

闽ICP备14008679号