Flutter ListView里面的 Container 自适应宽度

最新推荐文章于 2024-05-30 16:40:06 发布
最新推荐文章于 2024-05-30 16:40:06 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： flutter 文章标签： flutter dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014651417/article/details/119650069
版权
本文主要探讨在Flutter的ListView中如何使Container根据内容自适应宽度。特别是对于图文混合的情况，通过将Text包裹在Container内，可以实现宽度的自动调整。此博客旨在个人学习记录，欢迎读者指正不足。
摘要由CSDN通过智能技术生成 
Container(
            margin: EdgeInsets.only(left: 8, top: 8, right: 3, bottom: 10),
            constraints: BoxConstraints(
              maxHeight: 28 * 4,
            ),
            child: ListView.builder( 
                itemCount: 4, 
                itemBuilder: (context, index) {
                  return itemWidget(context, index);
                }
            ),
          ),

因为我做的是跑马灯样式的， 截图略有问题
请添加图片描述

Container 如果里面只是单纯文字(文字展示的话自己再调吧，我没细致调整)

Widget itemWidget(BuildContext context, int index) {
    double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11;  
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
          height: 20,
          constraints: BoxConstraints(
            maxWidth: cardWidth,
          ),
          margin: EdgeInsets.only(top: 8),
最低0.47元/天 解锁文章
烟花下的孤独
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
「 Flutter」Container、Image 和 ListView 控件
军火库
02-24 1763
Container 控件 Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。 class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { r
flutter listview item宽度撑满的问题
qq_38373150的博客
09-29 1958
flutter中使用listView，item的宽度是撑满的，这时候如果想要某个item宽度不充满，可以用center()包裹。
Flutter——Container、Column宽度问题
最新发布
season_26的博客
05-30 343
SliverToBoxAdapter-Container-Column-Text（标题）+ [ Container-Text ]（内容）随内容伸缩，当文字足够长，撑满屏幕（不会溢出）；文字不够长时跟随文字宽度。不需要设置宽度，会自动拉伸到屏幕宽度。
Flutter 小技巧之横竖列表的自适应大小布局支持
恋猫de小郭的博客
04-25 1543
今天这个主题看着是不是有点抽象？又是列表嵌套？之前不是分享过了么？那这次的自适应大小布局支持有什么不同？算是某些奇特的场景下才会需要。首先我们看下面这段代码，基本逻辑就是：我们希望vertical的ListView里每个 Item 都是根据内容自适应大小，并且 Item 会存在有horizontal的ListView这样的 child。horizontal的ListView我们也希望它能够根据自己的children去自适应大小。答案是不能，因为这段代码里vertical的ListView嵌套了。
解决 Flutter ListView 子元素 无限宽度
Lan_Se_Tian_Ma的博客
06-19 2567
Container( alignment: Alignment.center, child:ListView( padding: EdgeInsets.fromLTRB(16, 0, 16, 0), children: <Widget>[ Container( alignment: Alignment.topCenter, ...
Flutter滚动型容器组件 - ListView篇
augfun的博客
11-27 1774
Flutter滚动型容器组件 - ListView篇 flutter前端dartui 发布于 2019-07-10 1. 前言 Flutter作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的Google加持，其发展速度已经足够惊人，可以预见将来对Flutter开发人员的需求也会随之增长。 无论是为了现在的技术尝鲜还是将来的潮流趋势，都9102年了，作为一.
flutter 自适应宽高气泡框，聊天气泡框
qq_35629609的博客
07-18 674
还有的就是通过算child 然后动态计算气泡框宽高，脱裤子💨，放到listview 刷新数据还会丢ui，因为要算某一个widget 的大小，必须是已经加载过，然后你再刷新listview然后更新大小。不管是text内容，还是布局大小你要计算那就GG。Container 红色正方形 然后 你剪切绘制成 气泡框的样子，然后 夹角长， 你直接Container padding 个夹角长度 ，内容不就显示全了么？看看我发表时间，我真的潦草一下博客吧。网上好多气泡框，都让写固定宽高，无法自适应文本内容。
Flutter ListView列表布局
10-05
ListView 是最常用的滚条列表，它继承至 CustomScrollView，大多 CustomScrollView 的属性都可用。
Flutter ListView 上拉加载更多下拉刷新功能实现方法
08-25
Flutter ListView 上拉加载更多下拉刷新功能实现方法 Flutter ListView 是一个非常常用的控件，它可以用来展示列表数据。在实际开发中，我们经常需要实现上拉加载更多和下拉刷新的功能，以提高用户体验。下面我们...
flutter TextField换行自适应的实现
08-25
本文将详细探讨如何在Flutter中实现TextField的换行自适应效果，包括自动调整高度以适应输入内容的增长，同时保持预设的内外边距。 首先，我们要明确实现这个效果需要关注的关键点： 1. **自定义间距**：可以通过`...
Flutter中ListView 的使用示例
08-27
Flutter 中ListView 的使用示例 Flutter 是一个跨平台的移动应用框架，由 Google 开发，使用 Dart 语言编写。ListView 是 Flutter 中一个基本的控件，用于显示大量数据。下面是 Flutter 中 ListView 的使用示例，...
flutter--列表及表格布局
weixin_43846755的博客
10-11 1815
目录列表及表格布局ListView布局GridView布局Table布局总结： 列表及表格布局 ListView布局 Main.dart import 'package:flutter/material.dart'; import 'list.dart';//引入list.dart,之后就可以使用其中的方法 void main(){ //程序入口 runApp( new MaterialApp( title: "ListΩView布局示例", home: new M
Flutter系列之Container宽度自适应
热门推荐
shving的专栏
08-02 4万+
Container是flutter开发中最常用的组件，它有以下特点： 1. 当Container没有child组件的时候，Container的宽高默认占满父控件，也就是全屏 2.当Container有child组件的时候，宽高以child组件的宽高同等大小，也就是wrap_content 当Container的child组件为Row或者Column的时候，要为主轴添加 MainAxisSize.min，否则Container在主轴上是铺满的。 ...
Flutter学习笔记（一）-热重启、Container、ListView、GridView、Image、Text
malechi的博客
02-02 344
内容包括：热重启方法、Text Class、Container容器、Image组件、ListView组件（纵向List、横向List、动态列表）、GridView网格列表。
Flutter控件篇（Stateful widget）——ListView
The blog of CSDN in 杨天福
07-17 1万+
使用 package开源软件包 pubspec 文件管理 在 lib/main.dart 中引入更改后的依赖 使用 English words 包生成文本来替换字符串 添加一个 Stateful widget 创建一个 state 类 添加有状态的 RandomWords widget 到 main.dart 修改MyApp 里生成文字的代码： 创建一个无限滚动的 ListView ...
4.Flutter中的ListView的用法。
易帜¤的博客
02-11 989
ListView参数认知 列举一下ListView常用的参数： 参数名 参数说明 scrollDirection Axis.vertical竖向滑动，Axis.horizontal 横向滑动 padding 表示内边距 reverse 组件反向排序 children l列表元素 ListView的基本使用。 void main() => runApp(MyAp...
Flutter ListView设置分割线及列表嵌套不同的Item
j086924的专栏
01-12 3421
一.flutter分割线divider中属性简介 const Divider({ Key? key, this.height, //分割线区域的高度 this.thickness, //分割线的厚度，即分割线的高度 this.indent, //起点缩进距离 this.endIndent, //终点缩进距离 this.color, //分割线颜色 }) : assert(height == null || height >= 0.0),
Flutter 设置Container高度自适应GridView和ListView
weixin_44911775的博客
05-18 7605
参考 1、去掉Container的高度 2、添加下面语句 physics: NeverScrollableScrollPhysics(), shrinkWrap: true, 完整代码如下 Widget imageSection1(imgPath, imgPath1) { return ListView( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, chi
flutter wrap item自适应宽度
06-01
Flutter中的Wrap组件可以将其子组件按照一定规则进行排列，并且支持自适应宽度。如果要让Wrap的子组件自适应宽度，可以使用Flexible或Expanded组件来包裹子组件。 例如，下面的代码展示了一个Wrap组件，其中包含了三个带有不同文本内容的子组件，这些子组件都被包裹在了一个Expanded组件中，以使它们可以自适应宽度： ``` Wrap( children: <Widget>[ Expanded( child: Text('这是一个很长的文本内容'), ), Expanded( child: Text('这是另外一个更长的文本内容'), ), Expanded( child: Text('这是最后一个文本'), ), ], ) ``` 在上面的代码中，每个文本组件都被包裹在了一个Expanded组件中，这样它们就可以自适应宽度。如果不加Expanded组件，那么Wrap组件会按照默认的排列方式，将它们挤到一行并且溢出屏幕。 另外，你也可以使用Flexible组件来包裹子组件，而不是Expanded组件。Flexible组件与Expanded组件相似，但是它不会强制子组件充满可用空间，而是根据子组件的大小来分配可用空间。因此，如果你想要让Wrap的子组件在一定范围内自适应宽度，那么可以考虑使用Flexible组件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值