热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flutter样式基础

 1.可以使用Padding类设置Padding(padding:constEdgeInsets.all(8.0),child:,); 2. Container参数自带paddin

 

1. 可以使用 Padding类设置

 Padding(
      padding: const EdgeInsets.all(8.0),
      child:,
 );

 

2. Container 参数自带padding

flutter样式基础

 

 

Container(
      padding: const EdgeInsets.all(8.0),
      child: ,
);

 

 

 设置文本超出省略

 通过Text属性设置

Center(
  child: Text(
    '哈哈哈啊发几点上课了法律上的砝码啊发几点上课了法律上的砝码的开始浪费',
    textAlign: TextAlign.end,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
)

说明:

  1. maxLines 是显示的行数

  2. overflow 隐藏剩余内容,TextOverflow有 clip(切割) ,  ellipsis(显示省略号), fade(从上到下渐变)

 

组件 Container 的属性和使用

 先了解下组件结构:

flutter样式基础

说明:

  主要来说一下 alignment 属性,文字对齐方式,有topLeft(上左)、topCenter(上中)、topRight(上右)、centerLeft(中左)、center(中心)、centerRight(中右)、bottomLeft(下左)、bottomCenter(下中)、bottomRight(下右)

  color 是背景颜色属性,可以通过 Colors类来调用颜色,只适合纯色背景

  decoration 属性,可以实现渐变背景,边框等设置,比较重要的一个属性,实现代码(左图)及效果(右图)如下:

  flutter样式基础      flutter样式基础

 

 

组件 Image 的属性和使用

图片的四种引入形式:

  1. asset :资源目录,项目目录

  2. file : 本地路径(手机)

  3. memory:内存图片(不准确)

  4. network : 网络图片

 

Image组件使用:

flutter样式基础

 

 

 

 

网格组件

flutter样式基础

 

 

 

 

水平方向布局

 

1. 均等布局

flutter样式基础    flutter样式基础

 

 

2. 灵活布局

flutter样式基础   flutter样式基础

 

卡片布局

flutter样式基础

 

 

导航跳转返回

flutter样式基础

 


推荐阅读
author-avatar
周周周大丨小姐想好好在家呆
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有