Flutter 流式布局wrap实现颜色标签选择器(1)，2024Android面试总结

最新推荐文章于 2024-06-01 09:36:11 发布
最新推荐文章于 2024-06-01 09:36:11 发布
阅读量419 收藏 9
点赞数 5
分类专栏： 程序员 文章标签： flutter 面试 职场和发展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79056696/article/details/137484466
版权
本文展示了如何使用Flutter的Wrap组件创建一个颜色标签选择器，包括设置圆角背景、文本和点击事件。通过示例代码，解释了布局样式、BoxDecoration和GestureDetector的使用，适用于Android开发者的面试准备。
摘要由CSDN通过智能技术生成

double marginLr = ViewUtils.currentWidth(50.0);

double marginTb = ViewUtils.currentHeight(300.0);

return Container(

color: Color(0x80000000),

child: Container(

padding: EdgeInsets.only(

left: ViewUtils.currentWidth(48.0),

right: ViewUtils.currentWidth(48.0)),

margin: EdgeInsets.only(

top: marginTb, left: marginLr, right: marginLr, bottom: marginTb),

),

);

}

@override

Widget build(BuildContext context) {

double marginLr = ViewUtils.currentWidth(50.0);

double marginTb = ViewUtils.currentHeight(300.0);

return Container(

color: Color(0x80000000),

child: Container(

padding: EdgeInsets.only(

left: ViewUtils.currentWidth(48.0),

right: ViewUtils.currentWidth(48.0)),

margin: EdgeInsets.only(

top: marginTb, left: marginLr, right: marginLr, bottom: marginTb),

decoration: BoxDecoration(//边框颜色+圆角

color: Colors.white,

borderRadius: BorderRadius.all(

Radius.circular(ViewUtils.currentWidth(40.0)),

),

),

),

);</

最低0.47元/天 解锁文章
2301_79056696
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter流式布局Wrap使用详解
怀旧的老张 的博客
09-14 2927
目录 先看Wrap相关属性 direction alignment spacing与runSpacing runAlignment crossAxisAlignment verticalDirection clipBehavior 完整代码奉上 对我最大的鼓励与支持： 先看Wrap相关属性 Wrap({ Key key, //排版方向 有 横向Axis.horizontal 纵向Axis.vertical 两种 this.direc...
flutter 颜色选择
07-01
flutter 颜色选择器，有个很好的颜色选择组件，直接引用，使用非常方便。pick color. 选择后实时更新。
Flutter 实现流式布局
JerryWu145的专栏
01-14 4083
先来看看效果图吧 想必很多同学已经开始体验flutter了吧，如果还没有安装，请移步flutter 中文网 进行安装。 不过别着急，光看个热闹也是可以的，顺便熟悉一下 flutter 的语法，也是很不错的哦。 当然，在安装flutter过程中，可能会遇到一些坑，我只是记录了我自己的坑，如果想了解，请查阅我之前的文章。 那么，接下来，我们步入正题，我自行切入小白视角，大神路过请手下留情...
强大灵活的色彩选择器 —— FlexColorPicker深度解析与应用推荐
最新发布
gitblog_00095的博客
06-01 452
强大灵活的色彩选择器 —— FlexColorPicker深度解析与应用推荐 项目地址:https://gitcode.com/rydmike/flex_color_picker 在数字化设计与开发领域，色彩的选择至关重要，直接影响着产品的视觉体验和用户体验。今天，我们将深入探索一个针对Flutter平台的开源项目——FlexColorPicker，它为移动与桌面应用开发带来全新的色彩选择体验。 ...
Flutter 颜色选择器-选择颜色flutter_colorpicker
Leove的专栏
09-08 2009
flutter_colorpicker: Provides a material color picker for your app onPressed: () { // 4 showDialog( context: context, builder: (context) { // 5 return AlertDialog( .
flutter_material_color_picker：材质颜色选择器，可以自定义颜色。 分两步选择，第一个主要颜色和第二个阴影
02-03
flutter_material_color_picker：材质颜色选择器，可以自定义颜色。 分两步选择，第一个主要颜色和第二个阴影
flex_color_picker:高度可定制的Flutter颜色选择器
03-22
FlexColorPicker FlexColorPicker是Flutter的可自定义颜色选择器。 ColorPicker可以显示六种不同类型的颜色选择器，其中三种用于标准Flutter Material颜色及其阴影。 可以自定义用于拣货项目的尺寸和样式。 笔记： 这是FlexColorPicker 2.0.0开发人员，并且预发行版本具有声音无效的安全性。 与以前的稳定版1.1.5 none null安全版本相比，它包含许多新功能。 软件包文档尚未更新，以涵盖最终2.0.0版本中引入的新功能以及null安全。 变更日志涵盖了主要变更。 API文档也是最新的。 捆绑的实时演示了所有新功能，您可以更改大多数API设置。 该演示还在工具提示中为修改演示中API值的每个控件显示了每个API名称和当前值。 在暂挂的稳定发行版之前，不会再将任何新功能添加到2.0.0。 此版本是稳定和微调阶段
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
locationpicker:Flutter的位置选择器
05-04
Flutter for Flutter中缺少的位置选择器。 具有深色主题和自定义本地化支持。 :warning: 请注意：该库将不受场地选择器的弃用而受到影响，。 :lollipop: 请记住为您的API密钥启用Places API ， Maps SDK for ...
Flutter流式布局
kailengchen的博客
08-11 277
https://www.jianshu.com/p/426e4f0bd51d
flutter_color：Flutter调色板生成器
02-17
flutter_color Flutter调色板生成器 在检查Flutter颜色 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
Flutter 流式布局、自动换行（Wrap、Flow）
Dream It Possible
09-06 4169
使用Android原生来实现流式布局还是有点麻烦的，甚至需要自定义view或者使用第三方的库。而在Flutter中，官方为我们提供了流式布局的控件，我们可以很方便的实现流式布局。FlowDelegate是一个抽象类，我们一般会重写paintChildren方法，在该方法中，我们可以来控制子控件的摆放。在正常情况下，能用wrap就用wrap，实现其来比较简单，如果是比较个性化的排列规则，可以使用Flow来实现。首先来看Wrap，Wrap是一个可以使子控件自动换行的控件，默认的方向是水平的，使用起来非常简单。
Flutter 流式布局_Wrap
weixin_38397436的博客
05-14 268
spacing 横轴间距 spacing: 10, runSpacing 纵轴间距 runSpacing: 10, alignment 主轴对齐方式 alignment: WrapAlignment.start, runAlignment 整体相对于父布局的对齐方式 //child全部右对齐 runAlignment: WrapAlignment.end, 示例 class WrapBody extends StatelessWidget { @override Widget bui
Flutter-Wrap_Layout 流式布局
qq_41255975的博客
12-02 1097
1. 流式布局 Wrap ​ 流式布局，允许有多个子组件，可以实现组件换行。Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式布局。 direction ​ 控制布局方向，默认水平方向（Axis.horizontal)，可以设置谁知方向（Axis.vertical)。 alignment ​ alignment属性控制主轴对齐方式，crossAxisAlignment属性控制交叉轴对齐方式，对齐方式只对有剩余空间的行或者列起作用，例如水平方向
Flutter 基础篇（十四）—— 流式布局
一个写代码的废物
10-17 360
在前面讨论到的所有布局容器里面，都没有考虑元素溢出的问题，比如： Row( children: <Widget>[ Text('jonas'*100) ], ); 显然，一行肯定无法显示下这么长的文本，然而，Row 给出的处理方式是 —— 抛出错误！ Flex 、Row 、Column 都存在这样的问题，所以，如果需要考虑溢出场景的时候，应该使用流式布局组件 Wrap...
flutter系列之:在flutter中使用流式布局
程序那些事
11-28 1436
我们在开发web应用的时候，有时候为了适应浏览器大小的调整，需要动态对页面的组件进行位置的调整。这时候就会用到flow layout，也就是流式布局。同样的，在flutter中也有流式布局，这个流式布局的名字叫做Flow。事实上，在flutter中，Flow通常是和FlowDelegate一起使用的，FlowDelegate用来设置Flow子组件的大小和位置，通过使用FlowDelegate.paintChildre可以更加高效的进行子widget的重绘操作。
46、Flutter之 布局组件 流式布局Wrap，Flow
热门推荐
wywinstonwy的专栏
01-23 1万+
Row 和 Colum 如果子 widget 超出屏幕范围，则会报溢出错误，如： Row( children: <Widget>[ Text("xxx"*100) ], ); 运行效果所示： 可以看到，右边溢出部分报错。这是因为Row默认只有一行，如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutter中通过Wrap和Flow来支持流式布局，将上例中的 Row 换成Wrap后溢出部分则会自动折行，下面我们分别介绍Wrap和Flow
FlutterDemo----Wrap流式布局
csdn_liuyw的博客
08-15 364
main.dart import 'package:flutter/material.dart'; import 'wrap_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值