Flutter实现容器组件、图片组件 的代码

•容器组件

容器组件（Container）可以理解为在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，从而形成最终你想要的页面布局。当然Flutter中的容器组件作为一个"容器"，肯定会有一些给我们提供一些属性来约束我们容器内的组件，下面介绍一下容器组件（Container）的一些常用属性及描述：

于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。

写一个简单的例子，体验一下容器组件Container，主要是加了一个边框及底色，示例代码如下：

import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  title: '容器组件demo',
  home: Scaffold(
  body: Center(
   child: Container(
   width: 200,
   height: 200,
   //添加边框装饰效果
   decoration: BoxDecoration(
    color: Colors.blue,
    border: new Border.all(
    width: 10, //边框粗细
    color: Colors.amberAccent //边框颜色
    ),
    borderRadius: const BorderRadius.all(const Radius.circular(5)) //边框圆角
   ),
   child: Text(
    'Flutter Container Demo',
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 20),
   ),
   ),
  ),
  ),
 );
 }
}

　页面截图如下：

讲解一下上面的代码，其实很简单，就是在body内放置了一个container组件和一个text组件，给容器组件container设置的宽、高、背景色、边框、边框圆角、边框的粗细以及边框的颜色，然后在容器container内放了一个text组件，并设置的text的对齐方式以及字体大小。

看到页面可能有人会问，为什么这个容器会在页面的正中央呢？这是因为body的内容设置的属性为center居中。

简单说几点属性的可选值比如textAlign（文本的对齐方式）、BorderRadius（圆角）、TextStyle（字体样式），最直接的还是让大家看一下截图，如下：

大家可以从提示中看到，textAlign（文本的对齐方式）有左对齐、右对齐、居中等等，BorderRadius（圆角）有对右上、左上、右下、左下单独设置圆角的属性，TextStyle（字体样式）有颜色、大小、行高、阴影、粗细等等属性，这里我们就不一一说明了，感兴趣的同学可以自己尝试一下。

Container小结：

说实话这也是我第一次开始用Flutter写一个简单的界面Demo，作为一个Android程序员来讲，感觉不是很习惯，好在我有weex的开发经历，写过很多vue的页面，其实在Flutter里面写页面就是一层一层的child嵌套，用无数个child堆积出一个页面，现在写的Demo很简单，不知道以后页面复杂了，会不会把自己嵌套懵了.......

•图片组件

图片组件（Image）是显示图像的组件，Image组件有多种构造函数

　　1.new Image：从ImageProvider获取图像

　　2.new Image.asset：加载资源图片

　　3.new Image.file：加载本地图片文件

　　4.new Image.newwork：加载网络图片

　　5.new Image.memory：加载Uint8List资源图片

Image组件属性及描述

BoxFit取值及描述

按照惯例附上一段Demo：

import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  title: '图片组件Demo',
  home: new Center(
  child: Container(
   color: Colors.white,
   child: new Image.network(
   'https://flutter.io/images/homepage/header-illustration.png',
   width: 200,
   height: 200,
   ),
  ),
  ),
 );
 }
}

按照惯例附上效果截图：

上面可以看出，我给从网络上获取的图片设置的宽、高分别为200，但是我并没有设置图片的填充模式，那么我把填充模式设置为fitHeight会怎么样呢？

import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  title: '图片组件Demo',
  home: new Center(
  child: Container(
   color: Colors.white,
   child: new Image.network(
   'https://flutter.io/images/homepage/header-illustration.png',
   width: 200,
   height: 200,
   fit: BoxFit.fitHeight,
   ),
  ),
  ),
 );
 }
}

可以看的出来，高度充满了，但是水平方向被拉伸了。

其他的图片属性以及填充方式的属性，我就不一一给大家演示了，我尝试了很多种组合，发现还挺有意思的，希望大家也能多多的进行尝试！

总结

以上所述是小编给大家介绍的Flutter实现容器组件、图片组件 的代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！