Flutter控件

最新推荐文章于 2025-03-14 08:34:50 发布

chenyiluo94

最新推荐文章于 2025-03-14 08:34:50 发布

阅读量1.1k

点赞数

分类专栏： Flutter相关文章标签： flutter android

本文链接：https://blog.youkuaiyun.com/chenyiluo94/article/details/125372471

版权

本文详细介绍了Flutter的基础控件，包括Text、图片、按钮、输入框、单选框、复选框、表单和滑块等。还涵盖了布局类组件如Column、Row、Flex、Expanded、Wrap和Stack。此外，讨论了滚动类组件如SingleChildScrollView、ListView、GridView和CustomScrollView，以及功能型组件WillPopScope、InheritedWidget和Theme。文章最后提到了容器类组件和Stack帧布局的使用。

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

一、基础控件

1.Text

new Text('Text文字',
style: new TextStyle(fontSize: 32.0, color: Colors.red))

2.图片

（1）Icon:系统自带图标

new Icon(Icons.star, color: Colors.red[500])

（2）本地图片

Image.asset()

new Image.asset('images/2.0x/list_img.png',
width: 100, height: 100)

AssetImage

Image(
           width: 100,
           height: 100,
           color: Colors.green,
           image: AssetImage("images/2.0x/list_img.png"), )

（3）网络图片

Image.network()

Image.network(
                    'https://img2.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto',
                    width: 100,
                    height: 100,)

NetworkImage

Image(
                    width: 100,
                    height: 100,
                    image: NetworkImage(
                        "https://img2.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto"),
                  ),

（4）Alignment设置图片位置

topCenter	居中靠上
topRight	右上角
centerLeft	居中靠左
center	居中
centerRight	居中靠右
bottomLeft	居右下角
bottomCenter	居中靠下
bottomRight	居右下角

（5）BoxFit设置大小和图片不吻合时

BoxFit.contain  默认值,保持图片的原始的比例,等比缩放
BoxFit.fill  充满这个容器,会出现拉伸
BoxFit.cover 保持图片大小,超过部分会被裁剪
BoxFit.fitWidth  宽度充满容器，高度等比缩放，图片不会被拉伸，超出部分会被剪裁
BoxFit.fitHeight  高度充满容器，宽度比例缩放，图片不会被拉伸，超出部分会被剪裁。
BoxFit.none  没有设置显示策略，以原始大小居中来显示
BoxFit.scaleDown  当图片资源大于容器的时，效果相当于 BoxFit.none，
                              当组件比图片小时，效果相当于 BoxFit.contain。