赞
踩
目录
今天在查看Flutter源码的时候,发现了一个有意思的组件FlutterLogo.顺便调用了一下发现挺有意思的,代码以及实现比较简单,新手阅读源码的话,可以看下这个Widget的内部实现,用它练练手。
文档对这个widget的介绍比较简单:Flutter是一个widget,用来展示Flutter的logo。这个Widget遵循IconTheme。
默认情况下,FlutterLogo的尺寸是大小是24。
我们可以通过代码看下默认显示的效果。例如我们通过下面的代码展示一个居中的FlutterLogo.效果图如图1所示:
- import 'package:flutter/material.dart';
-
- class MyHomePage extends StatefulWidget {
- const MyHomePage({super.key, required this.title});
- final String title;
- @override
- State<MyHomePage> createState() => _MyHomePageState();
- }
-
- class _MyHomePageState extends State<MyHomePage> {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(
- title: const Text('FlutterLogo'),
- ),
- body: const Center(
- child: FlutterLogo(),
- ), // This trailing comma makes auto-formatting nicer for build methods.
- );
- }
- }
图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。有兴趣的话,可以改变下这两个属性的值看下显示效果。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。