本文共 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 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！