flutter04 - 布局

其他 2020-03-17 17:10:21 阅读次数: 0

容器

Row横向排列

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
        ],
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      margin: EdgeInsets.all(10.0),
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCcRn9SZ-1583675776165)(https://s2.ax1x.com/2020/03/08/3xQvvV.png)]

Column纵向排列

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
        ],
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      margin: EdgeInsets.all(10.0),
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSVsiuJY-1583675776167)(https://s2.ax1x.com/2020/03/08/3xQzuT.md.png)]

mainAxis主轴

Row和Column里面的属性

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
//        mainAxisAlignment: MainAxisAlignment.start, //开始
//        mainAxisAlignment: MainAxisAlignment.center,//居中
//        mainAxisAlignment: MainAxisAlignment.end,//尾部
        mainAxisAlignment: MainAxisAlignment.spaceAround,//周围
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,//之间
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//均匀的
        children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy),
        ],
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      margin: EdgeInsets.all(10.0),
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3UHFU5jx-1583675776167)(https://s2.ax1x.com/2020/03/08/3xlxJA.png)]

CrossAxisAlignment交叉轴

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        //主轴的
//        mainAxisAlignment: MainAxisAlignment.start, //开始
//        mainAxisAlignment: MainAxisAlignment.center,//居中
//        mainAxisAlignment: MainAxisAlignment.end,//尾部
        mainAxisAlignment: MainAxisAlignment.spaceAround,//周围
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,//之间
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//均匀的
      //交叉轴的
//        crossAxisAlignment: CrossAxisAlignment.start,
//        crossAxisAlignment: CrossAxisAlignment.end,
//        crossAxisAlignment: CrossAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,//拉伸效果


        children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy,size: 68.0,),
          IconBadge(Icons.wb_cloudy),
        ],
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PEku51iu-1583675776168)(https://s2.ax1x.com/2020/03/08/3x3kX6.png)]

SizedBox

强制子部件固定尺寸

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        //主轴的
//        mainAxisAlignment: MainAxisAlignment.start, //开始
        mainAxisAlignment: MainAxisAlignment.center, //居中
//        mainAxisAlignment: MainAxisAlignment.end,//尾部
//        mainAxisAlignment: MainAxisAlignment.spaceAround, //周围
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,//之间
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//均匀的
        //交叉轴的
//        crossAxisAlignment: CrossAxisAlignment.start,
//        crossAxisAlignment: CrossAxisAlignment.end,
//        crossAxisAlignment: CrossAxisAlignment.center,
//        crossAxisAlignment: CrossAxisAlignment.stretch, //拉伸效果

        children: <Widget>[
          SizedBox(
            width: 100.0,
            height: 60.0,
            child: Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(3, 55, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(
                Icons.ac_unit,
                color: Colors.white,
                size: 32.0,
              ),
            ),
          ),
          SizedBox(
            width: 70.0,
            height: 80.0,
            child: Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(3, 55, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(
                Icons.ac_unit,
                color: Colors.white,
                size: 32.0,
              ),
            ),
          ),
          SizedBox(
            width: 80.0,
            height: 180.0,
            child: Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(3, 55, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(
                Icons.ac_unit,
                color: Colors.white,
                size: 32.0,
              ),
            ),
          )
        ],
        /*children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy,size: 68.0,),
          IconBadge(Icons.wb_cloudy),
        ],*/
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Rg0Emsh-1583675776168)(https://s2.ax1x.com/2020/03/08/3xt6fg.png)]

Aligment对齐

alignment: Alignment.topCenter,

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        //主轴的
//        mainAxisAlignment: MainAxisAlignment.start, //开始
        mainAxisAlignment: MainAxisAlignment.center, //居中
//        mainAxisAlignment: MainAxisAlignment.end,//尾部
//        mainAxisAlignment: MainAxisAlignment.spaceAround, //周围
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,//之间
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//均匀的
        //交叉轴的
//        crossAxisAlignment: CrossAxisAlignment.start,
//        crossAxisAlignment: CrossAxisAlignment.end,
//        crossAxisAlignment: CrossAxisAlignment.center,
//        crossAxisAlignment: CrossAxisAlignment.stretch, //拉伸效果

        children: <Widget>[
          SizedBox(
            width: 100.0,
            height: 60.0,
            child: Container(
              alignment: Alignment.topCenter,
              decoration: BoxDecoration(
                color: Color.fromRGBO(3, 55, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(
                Icons.ac_unit,
                color: Colors.white,
                size: 32.0,
              ),
            ),
          ),
        ],
        /*children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy,size: 68.0,),
          IconBadge(Icons.wb_cloudy),
        ],*/
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RJ3D7TQX-1583675776169)(https://s2.ax1x.com/2020/03/08/3xI0Re.png)]

Stack一摞小部件

Stack里面 children里面的小部件全部会叠加在一起

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        //主轴的
//        mainAxisAlignment: MainAxisAlignment.start, //开始
        mainAxisAlignment: MainAxisAlignment.center, //居中
//        mainAxisAlignment: MainAxisAlignment.end,//尾部
//        mainAxisAlignment: MainAxisAlignment.spaceAround, //周围
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,//之间
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//均匀的
        //交叉轴的
//        crossAxisAlignment: CrossAxisAlignment.start,
//        crossAxisAlignment: CrossAxisAlignment.end,
//        crossAxisAlignment: CrossAxisAlignment.center,
//        crossAxisAlignment: CrossAxisAlignment.stretch, //拉伸效果

        children: <Widget>[
          Stack(
            alignment: Alignment.topLeft,
            children: <Widget>[
              SizedBox(
                width: 200.0,
                height: 260.0,
                child: Container(
                  alignment: Alignment.topCenter,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(3, 55, 255, 1.0),
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Icon(
                    Icons.ac_unit,
                    color: Colors.white,
                    size: 32.0,
                  ),
                ),
              ),
              SizedBox(
                width: 60.0,
                height: 60.0,
                child: Container(
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(3, 55, 255, 1.0),
                    shape: BoxShape.circle,
                    gradient: RadialGradient(
                      colors: [
                        Color.fromRGBO(7, 100, 120, 0.5),
                        Color.fromRGBO(255, 35, 20, 0.3),
                      ],
                    ),
                  ),
                  child: Icon(
                    Icons.wb_sunny,
                    color: Colors.white,
                    size: 32.0,
                  ),
                ),
              ),
              Positioned(
                right: 20.0,
                top: 20.0,
                child: Icon(Icons.ac_unit,color: Colors.white,size: 20.0,),
              ),
              Positioned(
                right: 30.0,
                top: 26.0,
                child: Icon(Icons.ac_unit,color: Colors.white,size: 20.0,),
              ),

              Positioned(
                right: 38.0,
                top: 30.0,
                child: Icon(Icons.ac_unit,color: Colors.white,size: 20.0,),
              ),

              Positioned(
                right: 20.0,
                top: 20.0,
                child: Icon(Icons.ac_unit,color: Colors.white,size: 20.0,),
              ),

            ],
          ),
        ],
        /*children: <Widget>[
          IconBadge(Icons.wb_cloudy),
          IconBadge(Icons.wb_cloudy,size: 68.0,),
          IconBadge(Icons.wb_cloudy),
        ],*/
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {this.size = 32.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

带有限制的ConstrainedBox

//带有限制的ConstrainedBox
class ConstrainedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 30.0,
              maxWidth: 60.0,
              maxHeight: 50.0,
            ),
            child: Container(
              color: Color.fromRGBO(3,155,122,  1.0),
            ),
          ),
        ],
      ),
    );
  }
}
忆梓善
发布了49 篇原创文章 · 获赞 6 · 访问量 8万+
私信 关注

猜你喜欢

转载自blog.csdn.net/zlhyy666666/article/details/104741699
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
VS2017编译opensmile具体过程和遇到的问题
PowerEnglish——mini-story3总结
微信小程序 数据库获取字符串 在view中显示换行
Java静态代码块/构造代码块/构造函数/静态变量/成员变量(相关示例)
Keras使用tensorflowjs部署demo
window下用git连接Github
图象的全变分和去噪
LeetCode刷题笔记--119. Pascal's Triangle II
【Linux】进程间通信 - 管道
polyA|ribo-minus|differentiated cell|Genetic heterogeneity
每日归档
更多
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022