flutter Container布局示例
发布日期:2021-10-10 05:31:01 浏览次数:9 分类:技术文章

本文共 3112 字,大约阅读时间需要 10 分钟。

flutter Container布局示例

在这里插入图片描述
首先是要竖着排 然后横着 排 很简单 直接上代码了
在这里插入图片描述
完成代码如下

import 'package:flutter/material.dart';void main() =>runApp(  new MaterialApp(
title: 'container布局容器示例',
home: LayoutDemo(),  ));class LayoutDemo extends StatelessWidget {
 @override  Widget build(BuildContext context) {
   // 返回一个Widget对象组件
Widget container = new Container(
  // 增加一个装饰效果
  decoration: new BoxDecoration(
color: Colors.blueGrey,
  ),
  child: new Column(
children:  [
  new Row(
// 使用Expaned 防止内容溢出
children:  [
  new Expanded(
child: new Container(
  width: 150.0,
  height: 150.0,
  decoration: BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.orange),
borderRadius: const BorderRadius.all(const Radius.circular(8.0))
  ),
  margin: const EdgeInsets.all(4.0),
  child: new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1576598542&di=39758e55a39a1a13b21e2996651c9f57&src=http://img.zcool.cn/community/01d0885549a3220000019ae90ecd6e.jpg'),
),
  ),
  new Expanded(
child: new Container(
  width: 150.0,
  height: 150.0,
  decoration: BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.limeAccent),
borderRadius: const BorderRadius.all(const Radius.circular(8.0))
  ),
  margin: const EdgeInsets.all(4.0),
  child: new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1576598542&di=39758e55a39a1a13b21e2996651c9f57&src=http://img.zcool.cn/community/01d0885549a3220000019ae90ecd6e.jpg'),
),
  ),
],
  ),
  new Row(
children:  [
  new Expanded(
child: new Container(
 width: 150.0,
  height: 150.0,
  decoration: BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.greenAccent),
borderRadius: const BorderRadius.all(const Radius.circular(8.0))
  ),
  margin: const EdgeInsets.all(4.0),
  child: new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1576598542&di=39758e55a39a1a13b21e2996651c9f57&src=http://img.zcool.cn/community/01d0885549a3220000019ae90ecd6e.jpg'),
),
  ),
  // 再一个Expaned
 new Expanded(
child: new Container(
 width: 150.0,
  height: 150.0,
  decoration: BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.green),
borderRadius: const BorderRadius.all(const Radius.circular(8.0))
  ),
  margin: const EdgeInsets.all(4.0),
  child: new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1576598542&di=39758e55a39a1a13b21e2996651c9f57&src=http://img.zcool.cn/community/01d0885549a3220000019ae90ecd6e.jpg'),
),
  ),
],
  )
],
  ),
);
return Scaffold(
  appBar: AppBar(
title: Text('Container 布局示例'),
  ),
  body: container,
);  }}

转载地址:https://blog.csdn.net/qq_22049619/article/details/103589980 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Flutter 使用pageView 完成底部导航功能
下一篇:学习Flutter搜索展开

发表评论

最新留言

关注你微信了!
[***.191.171.45]2022年12月06日 18时32分50秒