Flutter学习笔记 -- 基础组件

Watch_the_corner

已于 2023-05-30 11:02:16 修改

阅读量514

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter学习笔记文章标签： flutter 学习 android

于 2022-08-21 15:22:38 首次发布

本文链接：https://blog.youkuaiyun.com/Memory_of_the_wind/article/details/126450850

flutter学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文概述了Flutter中的基础组件如Text、IconButton和FloatingActionButton，展示了如何使用它们进行文本显示、图标操作和Material Design风格的按钮设计。此外，还介绍了Image组件的用法，包括图片加载、尺寸调整和颜色模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter组件分为基础组件、单一子元素组件和多子元素组件。

基础组件

Text 文本控件,类似于Android中的TextView

属性	说明
textAlign	对齐方式
maxLines	最大行数
textScaleFactor	缩放因子,默认值为1.0
style	TextStyle可以设置color、fontFamily、background、fontSize、decoration等
overflow	配合maxLines使用,超出最大行数时,可以用省略号或渐变效果隐藏
textSpan	配合Text.rich使用,可以实现富文本效果

Text(
'我是Text',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style:TextStyle(
	color:Colors.green,
	fontSize:12,
	decoration:TextDecoration.overline
),
)

IconButton是一个图标控件

const IconButton(
    icon: Icon(Icons.margin), 
	onPressed: () {},
)

FloatingActionButton是Material Design风格的按钮

floatingActionButton: FloatingActionButton(
	onPressed: _incrementCounter,
	 tooltip: 'Increment',
	 child: const Icon(Icons.add),
 )

Image

Image(
	image: AssetImage('images/home_icon.png'),
	width: 500,
    alignment: Alignment.centerLeft,
    fit: BoxFit.none,
    colorBlendMode: BlendMode.color,
)