Flutter 容器布局(Container),Container
在Flutter里大量使用,它是一个组合Widget,内部有绘制Widget、定位Widget和尺寸Widget。Container组件的常见属性请参考容器组件。接下来我们看一个用Container进行容器布局的综合小例子。具体实现步骤如下:
步骤1:在helloworld工程下新建一个images文件夹,并放入三张图片,如图所示:
步骤2:打开工程根目录下的工程配置文件,如图所示:
步骤3:修改工程配置文件,添加图片的路径配置,如图所示:
注意 图片资源配置项不要多加空格,否则运行时会报错。另外路径一定要配置正确,并且要确保在指定路径下有此图片,否则运行时同样会报错。
步骤4:编写容器布局示例代码,完整代码如下:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
title: 'Container容器布局示例',
home: LayoutDemo(),
),
);
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 返回一个Container对象
Widget container = Container(
// 添加装饰效果
decoration: BoxDecoration(
// 背景色
color: Colors.grey,
),
// 子元素指定为一个垂直水平嵌套布局的组件
child: Column(
children: <Widget>[
// 水平布局
Row(
children: <Widget>[
// 使用Expanded防止内容溢出
Expanded(
child: Container(
width: 150.0,
height: 150.0,
// 添加边框样式
decoration: BoxDecoration(
// 上下左右边框宽度设置为10.0,颜色为蓝灰色
border: Border.all(width: 10.0, color: Colors.blueGrey),
// 上下左右边框弧度设置为8.0
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
// 上下左右增加边距
margin: const EdgeInsets.all(4.0),
// 添加图片
child: Image.asset('images/1.jpeg'),
),
),
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.blueGrey),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/2.jpeg'),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.blueGrey),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/3.jpeg'),
),
),
Expanded(
child: Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.blueGrey),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/2.jpeg'),
),
),
],
),
],
),
);
return Scaffold(
appBar: AppBar(
title: Text('Container容器布局示例'),
),
body: container,
);
}
}
上述示例代码的视图展现大致如图所示:
酷客教程相关文章:
评论前必须登录!
注册