flutter Container布局示例

最新推荐文章于 2022-11-08 20:13:51 发布

IT小小猴子

最新推荐文章于 2022-11-08 20:13:51 发布

阅读量353

点赞数

分类专栏： Flutter学习笔记

本文链接：https://blog.csdn.net/qq_22049619/article/details/103589980

版权

Flutter学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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: <Widget>[
          new Row(
            // 使用Expaned 防止内容溢出
            children: <Widget>[
              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: <Widget>[
              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,
    );
  }
}