Flutter常见布局属性详解。(第二章)

最新推荐文章于 2024-05-27 23:55:33 发布
最新推荐文章于 2024-05-27 23:55:33 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： Flutter Flutter学习 文章标签： Flutter布局 各类布局集合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26841579/article/details/89926148
版权

写在前面，先看看 属性如图：。

在这里插入图片描述
建议放大看。

第一个布局

**在这里插入图片描述
代码如下： 我用的比例布局，分为左右！

import 'package:flutter/material.dart';


class One_Top extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return    Container(
      margin: EdgeInsets.all(10),//边距
      child: DecoratedBox(//最外层样式，用盒子画出来
        decoration: BoxDecoration(
          //边框
            gradient: LinearGradient(colors: [
              Colors.lightBlue,
              Colors.lightBlueAccent[700]
            ]),
            //背景渐变
            borderRadius: BorderRadius.circular(20),//边框圆角
            //阴影设置
            boxShadow: [
              BoxShadow(
                //样式
                  color: Colors.black38,
                  offset: Offset(2.0, 2.0),//偏移量
                  blurRadius: 4.0)//模糊的半径
            ]),
        child: Container(
          padding: EdgeInsets.all(10),
          child: Flex(
            //整个横条
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 5,
                child: Row(
                  children: <Widget>[
                    ClipOval(
                      child: Image.network(
                        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1395765958,3377106680&fm=27&gp=0.jpg',
                        height: 50,
                        width: 50,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Text(
                      '  小杰  ',
                      style: TextStyle(color: Colors.black),
                    ),
                    Icon(
                      Icons.verified_user,
                      color: Colors.green,
                      size: 14,
                    ),
                  ],
                ),
              ),
              Expanded(
                flex: 2,
                child: Row(
                  children: <Widget>[
                    OutlineButton(//带有边框的按钮
                      onPressed: null,
                      child: Text(
                        '开通会员',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.red),
                      ),
                      color: Colors.blue,
                      borderSide: BorderSide(width: 2),
                      disabledBorderColor: Colors.red,
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }



}

第二个布局：

在这里插入图片描述

import 'package:flutter/material.dart';

class Item_MusicList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Flex(
        //最外层
        direction: Axis.horizontal, //横向
        crossAxisAlignment: CrossAxisAlignment.start, //设置从头开始
        children: <Widget>[
          Expanded(
            //扩展
            flex: 5,
            child: Container(
                margin: EdgeInsetsDirectional.only(start: 10),
                height: 60,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Text(
                          '明天的我们',
                          style: TextStyle(color: Colors.black, fontSize: 16),
                        ),
                        Icon(
                          Icons.music_note,
                          color: Colors.green,
                          size: 15,
                        ),
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.check_circle,
                          color: Colors.blue,
                          size: 14,
                        ),
                        Icon(
                          Icons.high_quality,
                          color: Colors.red,
                          size: 14,
                        ),
                        Text(
                          '明天的我们明天的我们-路南',
                          style: TextStyle(color: Colors.black45, fontSize: 14),
                        ),
                      ],
                    )
                  ],
                )),
          ),
          Expanded(
            flex: 1,
            child: Container(
              height: 60,
              child: Column(
                //这个是控制子布局的位置(Row:start-上 end-下 Column:start:左,end-右)
                crossAxisAlignment: CrossAxisAlignment.center,
                //这个是控制子组件从什么位置开始(这个是子布局的轴心位置决定) 比如:放cossAaxisAlignment:end说明在右边,那么右边的Y轴
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[Icon(Icons.play_arrow)],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

第三种布局

在这里插入图片描述
代码：

import 'package:flutter/material.dart';
//电台
class Item_DianTai extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return    Container(
      height: 140,
      padding: EdgeInsets.all(5),
      child: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          //图片
          Expanded(
              flex: 2,
              child: Stack(
                alignment: AlignmentDirectional.center,
                children: <Widget>[
                  Positioned(
                    child: Image.network(
                      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=249787448,1681523128&fm=27&gp=0.jpg',
                      fit: BoxFit.cover,
                      height: 140,
                    ),
                  ),
                  Positioned(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.play_arrow,
                            size: 40,
                            color: Colors.white,
                          ),
                          Text(
                            '个性电台',
                            style: TextStyle(color: Colors.white),
                          )
                        ],
                      )),
                ],
              )),
          Expanded(
            //右边
            flex: 4,
            child: Container(
              child: Column(
                //上下
                children: <Widget>[
                  Container(
                    //上
                    color: Colors.white70,
                    margin: EdgeInsets.all(1),
                    padding: EdgeInsets.only(left: 10),
                    child: Flex(
                      direction: Axis.horizontal,
                      children: <Widget>[
                        Expanded(
                            flex: 3,
                            child: Column(
                              mainAxisAlignment:
                              MainAxisAlignment.center,
                              crossAxisAlignment:
                              CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  '新歌新碟',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: 18),
                                ),
                                Text(
                                  '“元气少年”，不期而遇',
                                  style:
                                  TextStyle(color: Colors.black38),
                                ),
                              ],
                            )),
                        Expanded(
                            flex: 1,
                            child: Image.network(
                              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556614721495&di=71950285f5c1364e908b2ade5549746c&imgtype=0&src=http%3A%2F%2Fimglf1.ph.126.net%2FpugDzv2Jd-tn3FAyTitYiw%3D%3D%2F16325548666908388.jpg',
                              fit: BoxFit.cover,
                              height: 62,
                            )),
                      ],
                    ),
                  ),
                  Container(
                    //下
                    color: Colors.white70,

                    margin: EdgeInsets.all(2),
                    padding: EdgeInsets.only(left: 10),
                    child: Flex(
                      direction: Axis.horizontal,
                      children: <Widget>[
                        Expanded(
                            flex: 3,
                            child: Column(
                              mainAxisAlignment:
                              MainAxisAlignment.center,
                              crossAxisAlignment:
                              CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  '新歌新碟',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: 18),
                                ),
                                Text(
                                  '“元气少年”，不期而遇',
                                  style:
                                  TextStyle(color: Colors.black38),
                                ),
                              ],
                            )),
                        Expanded(
                            flex: 1,
                            child: Image.network(
                              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556614721495&di=71950285f5c1364e908b2ade5549746c&imgtype=0&src=http%3A%2F%2Fimglf1.ph.126.net%2FpugDzv2Jd-tn3FAyTitYiw%3D%3D%2F16325548666908388.jpg',
                              fit: BoxFit.cover,
                              height: 62,
                            )),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

}

第四种布局：

在这里插入图片描述

import 'package:flutter/material.dart';

class ItemSquare extends StatelessWidget {
  var img_url;
  var number;

  ItemSquare(String img_url, String number) {
    this.img_url = img_url;
    this.number = number;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(2),
      width: 100,
      height: 100,
      child: Stack(
        alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
        children: <Widget>[
          Stack(
            //叠加布局
            children: <Widget>[
              Positioned(
                //定位
                child: new ClipRect(
                    child: Image.network(
                  '$img_url',
                  fit: BoxFit.cover,
                  height: 130,
                  width: 130,
                )),
//                  child: Image.network(
//                '$img_url',
//                fit: BoxFit.fitHeight,
//              )
              ),
              Positioned(
                bottom: 5,
                left: 2,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.headset,
                      size: 14,
                      color: Colors.white,
                    ),
                    Text(
                      '$number',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                right: 5,
                bottom: 5,
                child: Icon(
                  Icons.play_circle_outline,
                  color: Colors.white,
                  size: 25,
                ),
              )
            ],
          )

        ],
      ),
    );
  }
}

第五种布局

在这里插入图片描述

 import 'package:flutter/material.dart';
//三个子列表的item
class Item_GeDan extends StatelessWidget {
  var image;
  var titlename;
  var author;
  Item_GeDan(String image, String titlename, String author) {
    this.image = image;
    this.titlename = titlename;
    this.author = author;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.all(5),
      //比例布局
      child: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          //左边图片
          Expanded(
              flex: 3,
              child: Stack(
                overflow: Overflow.clip,
                children: <Widget>[
                  Positioned(
                    child: Container(
                        width: 140,
                        height: 140,
                        child: Image.network(
                          '$image',
                          fit: BoxFit.cover,
                        )),
                  ),
                  Positioned(
                      right: 10,
                      bottom: 10,
                      child: Icon(
                        Icons.play_circle_outline,
                        color: Colors.white,
                      )),
                ],
              )),
          //右边数据
          Expanded(
            flex: 5,
            child: Column(
              textDirection: TextDirection.ltr,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                DecoratedBox(
                    //装饰器盒子
                    decoration: BoxDecoration(
                      //装饰器类型
                      border: Border.all(
                          //边框设置
                          color: Colors.black54),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(vertical: 2, horizontal: 4),
                      child: Text(
                        "歌单",
                        style: TextStyle(color: Colors.black26),
                      ),
                    )),
                Text('$titlename',
                    style: TextStyle(color: Colors.black, fontSize: 18)),
                Text(
                  '$author',
                  style: TextStyle(color: Colors.black54, fontSize: 14),
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.headset,
                      color: Colors.black54,
                      size: 14,
                    ),
                    Text('123万'),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

第六种

在这里插入图片描述

代码如下：

import 'package:flutter/material.dart';
class Item_Type extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return     Container(
      margin: EdgeInsets.all(5),
      padding: EdgeInsets.all(5),
      child: DecoratedBox(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
              boxShadow: [
                //阴影
                BoxShadow(offset: Offset(2.0, 2.0), blurRadius: 10)
              ]),
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Flex(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                    flex: 1,
                    child: Column(
                      children: <Widget>[
                        Icon(Icons.account_circle, color: Colors.green),
                        Text('歌手')
                      ],
                    )),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.equalizer, color: Colors.green),
                      Text('排行')
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.dashboard, color: Colors.green),
                      Text('分类歌单')
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.nature, color: Colors.green),
                      Text('电台')
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.account_circle, color: Colors.green),
                      Text('一起听')
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }

}

。。。更多的 等遇到了 再继续添加吧！！！

随缘的人_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter_常用控件及其属性
红烧馍的博客
04-19 2875
Flutter 常用控件及其属性
Flutter布局详解
02-24
在介绍Flutter布局之前，我们得先了解Flutter中的一些布局相关的特性。boxconstraints有人也翻译为盒约束、箱约束，我个人还是觉得边界约束可能更直观一些。Flutter中的边界约束，是指widget可以按照指定限定条件，...
Flutter Row左右布局
丿灬安之若死
03-27 2072
Row( children: [ Text( "发布时间", style: TextStyle( fontSize: 20, color: Colors.black54), ..
Flutter 中的 Center 小部件：全面指南
最新发布
smileKH的博客
05-27 817
Center是一个布局小部件，它在水平和/或垂直方向上居中其子组件。它是一个没有视觉表现的容器，其主要作用是调整子组件的位置。
flutter左右布局
qq_28285625的博客
04-19 954
Flutter Row左右布局_安果移不动的博客-CSDN博客_flutter 左右布局
Flutter——UI布局
小雨的专栏
05-20 676
基础布局 Center 将子控件放置在自己内部中心。 widthFactor: 宽度系数，正数，父控件宽度/子控件宽度。不指定则为宽度占满。 heightFactor: 高度系数，正数，父控件高度/子控件高度。不指定则为高度占满。 asdasd asdasd adas ...
Flutter之Decoration（编写圆角竖线）
lyj1005353553的专栏
12-10 1045
自己根据资料编写圆角竖线，具体实现代码如下： Container( margin: EdgeInsets.fromLTRB(10, 10, 5, 10), width: 3, height: 11, decoration: ShapeDecoration( color: Colors.lig...
Flutter - 基础布局
GitLqr的博客
04-28 785
欢迎关注微信公众号：FSA全栈行动 ???? 一、单子布局 Widget 单子布局, 顾名思义就是只能包含一个子控件的 widget 1、Align(Center) Center 可以将子控件居中显示, 默认会尽可能拉伸填满父控件: class CenterDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Icon(Icons.p
Flutter V0.5.1 标准课程第二章 Flutter基础布局模
10-30
Flutter V0.5.1 标准课程第二章 Flutter基础布局模型-水平布局
Flutter——常用布局
FranzLiszt的博客
11-06 1132
《繁花》将围绕阿宝展开，''上世纪九十年代初，煌煌大时代，''人人争上游，阿宝也变成了宝总，成功过，失败过，在沪上弄潮儿女中留下一段传奇。''有过金碧辉煌，有过细水长流，男男女女，涨涨跌跌，道尽一个时代的情义与至真。
flutter Container容器布局
qq_45317844的博客
11-08 378
flutter Container容器布局
Flutter页面布局之百分百布局FractionallySizedBox
一花一世界 一叶一菩提
10-12 5499
import 'package:flutter/material.dart'; class Test extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container(...
Flutter Alignment FractionalOffset AlignmentDirectional
Dream It Possible
08-31 330
AlignmentDirectional 的坐标系和Alignment比较像，原点在中心，不过AlignmentDirectional的起始位置和书写（TextDirection）方向有关。FractionalOffset继承Alignment，他们2个区别就是坐标系不一样，Alignment的原点是中心，而FractionalOffset原点是左上角。比如：Alignment(0,0)代表控件的中心。参数x：-1：最左边 1:最右边 0：中间。参数y：-1：最上边 1:最下边 0：中间。...
Flutter 实现百分比布局 OutlinedButton 与MaterialButton设置圆角
丿灬安之若死
08-13 894
child: Padding( padding: const EdgeInsets.all(20.0), child: Row( children: [ Expanded( flex: 2, child: OutlinedButton( onPressed: () {}, .
flutter FractionallySizedBox / 百分比布局、根据父容器百分比布局 / 点击空白隐藏键盘
初遇你时动了情
01-04 1040
用法与SizedBox类似，只不过FractionallySizedBox的宽高是百分比大小，widthFactor，heightFactor参数就是相对于父控件的比例。注意设置FractionallySizedBox宽高后，其子组件设置的宽高将不起作用。
Flutter 实现流式布局
JerryWu145的专栏
01-14 4075
先来看看效果图吧 想必很多同学已经开始体验flutter了吧，如果还没有安装，请移步flutter 中文网 进行安装。 不过别着急，光看个热闹也是可以的，顺便熟悉一下 flutter 的语法，也是很不错的哦。 当然，在安装flutter过程中，可能会遇到一些坑，我只是记录了我自己的坑，如果想了解，请查阅我之前的文章。 那么，接下来，我们步入正题，我自行切入小白视角，大神路过请手下留情...
Flutter 实现按位置大小比例布局的控件
codeofcc的博客
08-04 2417
做视频监控项目时需要需要展示多分屏，比如2x2、3x3、414等等，如果每一种分屏都单独实现会很麻烦，而且不能支持用户定制。最好的方式还是实现一个通用的分屏容器，而且采样比例计算位置大小，可以适配任意尺寸。
flutter 底部bottomNavigationBar凸起效果
weixin_30851409的博客
08-29 1528
概要 最近在做flutter 的时候，之前看到想实现 底部导航栏中间按钮 凸起效果, 最近想做又突然找不到方案了，因此记录下这里的实现方式。 预览效果 代码 主要使用BottomAppBar 组建，以及配合FloatingActionButton ，具体全部代码如下： import 'package:flutter/material.dart'; i...
Flutter深度解析：Container布局详解
"Flutter布局分析1" 在Flutter开发中，布局是构建用户界面的关键部分。本篇主要关注Flutter中的Container布局，这是一种高度可定制且在日常开发中最常用的布局方式。Container布局因其在小单元布局细节调整上的灵活...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值