本文共 3640 字，大约阅读时间需要 12 分钟。

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