Flutter 容器布局

Flutter 容器布局(Container)Container在Flutter里大量使用,它是一个组合Widget,内部有绘制Widget、定位Widget和尺寸Widget。Container组件的常见属性请参考容器组件。接下来我们看一个用Container进行容器布局的综合小例子。具体实现步骤如下:

步骤1在helloworld工程下新建一个images文件夹,并放入三张图片,如图所示:
Flutter 容器布局

步骤2打开工程根目录下的工程配置文件,如图所示:
Flutter 容器布局

步骤3修改工程配置文件,添加图片的路径配置,如图所示:
Flutter 容器布局

注意 图片资源配置项不要多加空格,否则运行时会报错。另外路径一定要配置正确,并且要确保在指定路径下有此图片,否则运行时同样会报错。

步骤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,
        );
      }
    }

上述示例代码的视图展现大致如图所示:
Flutter 容器布局

酷客教程相关文章:

赞(1)

评论 抢沙发

评论前必须登录!