Flutter之三个重要的基本组件

119 阅读1分钟

SelfText.dart

main.dart中引入组件

Image.png

SelfText.dart中

Image.png

  • Scaffold是脚手架工具
  • appBar是material组件库为我们提供的组件
  • 一般来说,我们需要自定义一些组件,图片或文本之类的

Image.png\

  • Color.fromARGB可以自定义颜色
  • 溢出显示省略号要写在style外面

SelfContainer.dart

Image.png

  • Container的child可以传递任何组件
  • 我们通常有一个习惯,写一个组件,需要进行一些自定义的修改的时候,但是呢,系统的组件不支持传值,我们就在外层套上一个Container盒子,对它进行修改
  • decoration是装饰器,可以传递背景色、背景图、边框都可以
  • 可以传宽高

SelfImage.dart

Image.png

  • 我们在里面添加图片,两种方法,一个是网络图片,一个是本地图片,上述是网络图片

如果我们对这个图片的宽高等不满意,想进行修改就在外面加个盒子

Image.png

  • fit:BoxFit.cover表示图片完全伸展,不拉伸,可能会进行裁切
  • fit:BoxFit.fill 表示图片完全适应盒子容器,会拉伸

引入本地图片

  • 在项目根目录下创建文件夹images
  • 在项目yaml这个文件中进行一些配置

Image.png

组件中引入

Image.png