flutter 五：布局

最新推荐文章于 2024-05-23 22:39:24 发布
最新推荐文章于 2024-05-23 22:39:24 发布
阅读量242 收藏 1
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27597629/article/details/105100446
版权

文章目录

1.创建可配置的图标徽章（IconBadge）小部件

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(//垂直排列的小部件
        children: <Widget>[
          IconBadge(Icons.pool,size:64.0),
          IconBadge(Icons.pool,size:64.0),
          IconBadge(Icons.pool,size:64.0)
        ],
    );
  }
}
class IconBadge extends StatelessWidget{
  final IconData icon;
  final double size;
  IconBadge (this.icon,{this.size=32});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.all(10),
      child:Icon(icon,size:size,color:Colors.white),
      width: size+60,
      height: size+60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}

在这里插入图片描述

2. Row（横排） 与 Column（竖排）

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

在这里插入图片描述

3.mainAxis：主轴，crossAxis：交叉轴

Container里有几个和主轴相关的属性。

       mainAxisAlignment: MainAxisAlignment.spaceBetween,//center居中，end靠结束的位置，start靠开始的位置,
                                                         //spaceAround剩下的空间分配到小部件的周围，
                                                         //spaceBetween剩下的空间分配到小部件的中间
                                                         crossAxisAlignment: CrossAxisAlignment.stretch,//start在交叉轴的起点对齐,stretch拉伸

在这里插入图片描述

4.SizedBox：固定尺寸的盒子

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child:Column(
        mainAxisAlignment: MainAxisAlignment.center,//center居中，end靠结束的位置，start靠开始的位置,
                                                         //spaceAround剩下的空间分配到小部件的周围，
                                                         //spaceBetween剩下的空间分配到小部件的中间
        //crossAxisAlignment: CrossAxisAlignment.stretch,//start在交叉轴的起点对齐,stretch拉伸
        children:<Widget>[
          SizedBox(//固定尺寸的盒子
            width:200.0,
            height: 300.0,
            child:  Container(
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.ac_unit,color:Colors.white,size:32.0),
            ),
          ),
          SizedBox(
            height:32.0,
          ) ,//间距效果
          SizedBox(//固定尺寸的盒子
            width:100.0,
            height: 100.0,
            child:  Container(
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.brightness_2,color:Colors.white,size:32.0),
            ),
          ),
          //IconBadge(Icons.pool),
          //IconBadge(Icons.beach_access),
          //IconBadge(Icons.airplanemode_active),
        ]
      )
    );
  }
}

在这里插入图片描述

5.Alignment：对齐

alignment: Alignment.bottomRight,//0.0,0.0子部件居中，-1.0，0，0，子部件居左，topCenter上居中,bottomRight右下角

在这里插入图片描述

6.Stack：一摞小部件

stack里可以放一摞小部件，可以用position来放小部件

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child:Column(
        mainAxisAlignment: MainAxisAlignment.center,//center居中，end靠结束的位置，start靠开始的位置,
                                                         //spaceAround剩下的空间分配到小部件的周围，
                                                         //spaceBetween剩下的空间分配到小部件的中间
        //crossAxisAlignment: CrossAxisAlignment.stretch,//start在交叉轴的起点对齐,stretch拉伸
        children:<Widget>[
          Stack(
            children:<Widget>[

          SizedBox(//固定尺寸的盒子
            width:200.0,
            height: 300.0,
            child:  Container(
              alignment: Alignment.bottomRight,//0.0,0.0子部件居中，-1.0，0，0，子部件居左，topCenter上居中,bottomRight右下角
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.ac_unit,color:Colors.white,size:32.0),
            ),
          ),
          SizedBox(
            height:32.0,
          ) ,//间距效果
          SizedBox(//固定尺寸的盒子
            width:100.0,
            height: 100.0,
            child:  Container(
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.brightness_2,color:Colors.white,size:32.0),
            ),
          ),
          Positioned(
            right: 20,
            top: 20,
            child: Icon(Icons.ac_unit,color:Colors.white,size:32.0),
          ),
          //IconBadge(Icons.pool),
          //IconBadge(Icons.beach_access),
          //IconBadge(Icons.airplanemode_active),
            ]
          ),
        ]
      )
    );
  }
}

在这里插入图片描述

7.AspectRatio：宽高比

宽高比是16比9的小部件

AspectRatio(
            aspectRatio: 16.0/9.0,
            child:Container(
              color:Color.fromRGBO(2, 54, 255, 1.0),
            )
          )

在这里插入图片描述

8.ConstrainedBox：带限制的盒子

ConstrainedBox(
            constraints: BoxConstraints(
              minHeight:200.0,
              maxWidth:200.0,
            ),
            child: Container(
              color:Color.fromRGBO(3, 54, 255, 1.0),
            ),
          )

在这里插入图片描述

demo

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child:Column(
        mainAxisAlignment: MainAxisAlignment.center,//center居中，end靠结束的位置，start靠开始的位置,
                                                         //spaceAround剩下的空间分配到小部件的周围，
                                                         //spaceBetween剩下的空间分配到小部件的中间
        //crossAxisAlignment: CrossAxisAlignment.stretch,//start在交叉轴的起点对齐,stretch拉伸
        children:<Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(
              minHeight:200.0,
              maxWidth:200.0,
            ),
            child: Container(
              color:Color.fromRGBO(3, 54, 255, 1.0),
            ),
          )
          //StackDemo(),
        ]
      )
    );
  }
}
class StackDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
            children:<Widget>[

          SizedBox(//固定尺寸的盒子
            width:200.0,
            height: 300.0,
            child:  Container(
              alignment: Alignment.bottomRight,//0.0,0.0子部件居中，-1.0，0，0，子部件居左，topCenter上居中,bottomRight右下角
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.ac_unit,color:Colors.white,size:32.0),
            ),
          ),
          SizedBox(
            height:32.0,
          ) ,//间距效果
          SizedBox(//固定尺寸的盒子
            width:100.0,
            height: 100.0,
            child:  Container(
              decoration:BoxDecoration(
                color:Color.fromRGBO(3, 54, 255, 1.0),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Icon(Icons.brightness_2,color:Colors.white,size:32.0),
            ),
          ),
          Positioned(
            right: 20,
            top: 20,
            child: Icon(Icons.ac_unit,color:Colors.red,size:32.0),
          ),
          //IconBadge(Icons.pool),
          //IconBadge(Icons.beach_access),
          //IconBadge(Icons.airplanemode_active),
            ]
          );
  }
}
class IconBadge extends StatelessWidget{
  final IconData icon;
  final double size;
  IconBadge (this.icon,{this.size=32});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.all(10),
      child:Icon(icon,size:size,color:Colors.white),
      width: size+60,
      height: size+60,
      color: Color.fromRGBO(3, 54, 255, 1.0),
    );
  }
}
煮酒Shae
关注
专栏目录
flutter学习五 布局组件
weixin_45561719的博客
08-08 207
Flutter Column 垂直布局组件 Flutter Row 水平布局组件 Flutter Paddiing 组件 Flutter Stack 组件 alignment 配置所有子元素的显示位置 Alignment.center/Alignment(-1,1)//最小为-1最大为1 children 子组件 Flutter Stack Align Stack 组件中结合 Align 组件可以控制每个子元素的显示位置 alignment 配置所有子元素的显示位置 child 子组件 Flutter St
Flutter自己实现一个ProgressHUD
weixin_34281537的博客
04-24 561
用惯了iOS的SVProgressHUD，但是在flutter pub上的并没有找到类似的实现，于是自己实现一个 主要实现四个基本功能 Loading显示 成功显示 错误显示 进度显示：环形进度条和文字 库地址 pub.dartlang.org/packages/bm… dependencies: bmprogresshud: ^0.0.2 复制代码实现效果 由于HUD是盖在视图上面的...
flutter - 如何在Flutter中调整IconButton的大小(高度和宽度)
weixin_45349850的博客
11-17 7152
如何在Flutter中调整IconButton的大小(高度和宽度)？似乎需要默认的宽度和高度。没有height或width属性。 new IconButton( padding: new EdgeInsets.all(0.0), color: themeData.primaryColor, icon: new Icon(Icons.clear, size: 18.0), onPressed: onDelete, ) 您可以使用SizedBox强制其自行调整大小。 n
Flutter TextField 中自定义icon 过大时，修改尺寸
yinianjian2017的博客
03-01 1538
1、查看InputDecoration源码 2、通过增加Padding 并设置 padding: const EdgeInsets.all(10) 即可缩小icon图片，按需开发
【Flutter】【package】badges 徽章
自动人生博客
11-01 1079
badges ：可以实现，比如信息个数，在widget的右上角显示，就可以使用该package 来使用欢迎关注，留言，咨询，交流！
loterias-flutter：布局实用程序Flutter
02-17
【loterias-flutter：布局实用程序Flutter】 在Flutter开发中，有效的布局设计是构建用户友好应用程序的关键。`loterias-flutter`项目提供了一系列布局工具和示例，旨在帮助开发者更好地理解和应用Flutter中的各种...
Flutter开发：自定义Drawer的滑出位置的大小
01-03
Flutter开发过程中，Drawer控件的使用频率也是比较高的，其实有过移动端开发经验的人来说，Flutter中的Drawer控件就相当于ios开发或者Android开发中的“抽屉”效果，从侧边栏滑出导航菜单。对于Flutter中的Drawer...
2.-Flutter-Challenge：布局挑战，随后是LondonAppBrewery Flutter课程
02-20
"2.-Flutter-Challenge：布局挑战，随后是LondonAppBrewery Flutter课程" 是一个关于Flutter框架的编程挑战项目，主要聚焦在布局设计上。这个挑战可能是由LondonAppBrewery（一家知名的在线编程教育机构）设置的，...
Flutter入门：教程4 ListView
04-08
总之，Flutter的ListView是构建动态、可滚动列表的强大工具，通过灵活的配置和丰富的API，开发者可以轻松实现各种复杂布局和交互效果。结合Dart语言的简洁性和Flutter的高性能特性，ListView成为移动应用开发不可或...
FlutterDemo:演示与作业
04-12
Flutter框架包含一系列可重用的UI组件（Widgets）、布局工具和动画库，用于构建响应式用户界面。它的声明式编程模型使得开发者能轻松地描述应用的视图，并自动处理状态管理和界面更新。 3. **Widget**： 在...
flutter_badges：用于创建徽章的flutter程序包
02-04
flutter_badges：用于创建徽章的flutter程序包
flutter_app_icon_badge
03-21
Flutter App图标徽章插件 您可以使用此插件来更改应用程序图标上的徽章 支持平台 的iOS Android-一些Android设备（即使在Oreo上，官方API也不支持该功能） 苹果系统 Windows-进行中（需要帮助） Linux-进行中（需要帮助） 入门 的iOS 在iOS上，需要通知权限才能更新徽章。会自动询问何时添加或删除徽章。 还将以下内容添加到您的Info.plist中： < key>UIBackgroundModes</ key> < array> < string>remote-notification</ string> </ array> 安卓 在Android上，不存在用于在启动器中显示徽章的官方API。但是某些设备（三星，HTC ...）支持该功能。多亏了，支持约16个启动器。 镖 首先，您只需使用以下命令
【Flutter】Flutter 使用 badges 实现创建数字徽章
Code Metaverse
09-05 581
这个包可以帮助你轻松地为任何小部件添加徽章，例如显示购物车中的物品数量。
Flutter 中的 Badge 小部件：全面指南
最新发布
smileKH的博客
05-23 890
徽章是一种小的展示元素，通常包含数字、文本或图标，用来提醒用户某些内容需要关注。徽章可以独立存在，也可以附加到按钮、图标或其他UI元素上。通过自定义label：徽章上显示的文本或数字。showBadge：控制是否显示徽章。child：徽章附加的子组件。
App图标数字Badge实现
neabea2016的博客
12-25 841
使用第三方控件 导入第三方角标库ShortcutBadge 这个库使用各手机厂商系统的角标展示，比较推荐使用。但是小米手机使用的是notification进行推送，区别其他厂商，三方文档有对小米适配，但是使用demo还是无法在小米手机显示角标。 小米手机方案 原因是：app在打开状态下进行推送，系统会认为推送完成，所以不展示。 解决方案：在app关闭后，进行延时推送。并且点击进入app后，角标会自...
Flutter 生成 Icon 提示徽标 Widget
cppphp的专栏
02-12 1849
程序中有时为了向用户提供一些附加状态，常在 Icon 的角上用附加图标来展示，如比较常见的数字红点徽标，我们今天并不实现红点徽标，而是用缩小的Icon 做提示徽标，以展示其它的一些状态，如我的“蘑菇仪表”app中有一个 IconButton Flutter 并没有提供现成的 Icon 提示徽标 Widget，当然可以用第三方库来实现，但用现成的轮子有时也并不一定方便，其实实现这个功能非常简单 ...
flutter显示图标_如何自动调整Flutter中的图标大小
weixin_42510407的博客
01-14 1850
目前,我正在使用以下代码：body: new Container(child: new Column(crossAxisAlignment: CrossAxisAlignment.stretch,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [new MaterialButton(height: 120.0,child: ne...
（七）Flutter 布局 创建小部件 自定义view 关于布局的一些属性 mainAxis SizeBox Alignment stack AspectRatio ConstrainedBox
丿灬安之若死
12-14 2911
选自----------------- flutter开发 主要内容 创建LayoutDemo小部件 创建可配置图标徽章IconBadege 小部件 Row与Column mainAxis:主轴与crossAxis 交叉轴 SizeBox 固定尺寸的盒子 Alignment 对齐 stack 一摞小部件 AspectRatio 宽高比 ConstrainedBox 带限制的...
flutter 基本组件的使用
鱼忘七秒的博客
07-26 634
入门。介绍各种功能或组件的使用 有点乱。已import 导包作为分隔吧 flutter中文网 ：https://flutterchina.club/tutorials/ //主题 import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart'; import 'packa...
Flutter入门：构建、布局与绘制详解
本文档深入探讨了学习Flutter过程中的关键环节，即构建、布局和绘制。首先，作者提到对Flutter有了基础的掌握，但缺乏对其框架的整体理解，尤其是在理解和应用一些高级概念如container的大小变化以及widget中的key...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值