Flutter List＜Widget＞放在Column中显示不全问题

原创 已于 2022-02-18 15:17:49 修改 · 2.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

于 2022-02-18 15:14:30 首次发布
本文探讨了在Flutter应用中遇到的页面布局问题，特别是ListView内容显示不全的情况。开发者通过分析代码，展示了从头部组件、输入框、商品详情到列表内容的层级结构，并提供了两种不同的列表实现方式：Column+Flex与Scrollbar+ListView.builder。针对少量和大量数据，给出了相应的优化策略。

目前有个简单页面的实现，其中放置List<Widget>数据时，显示不全。

目前实现方法：

1. 最上面分为一层

2.input框一层

3.SKU + QTY 为一个层

4.内容列表一层

代码：

//最上面
HeadWidget(
    title: 'Receiving By xxx',
    text: 'Cancel',
        onTap: () {
            // Navigator.of(context)..pop();
            NavigatorUtils.pushPage(
                context: context,
                targPage: InBoundSingle(
                date: widget.date,
         ));
     },
)

///input框
ScanCodeInput(text: "Input xxx",)
///SKU + QTY
///Column ->  Container (主要设置左上、右上的圆角、高度)
///SKU /  QTY 是通过Flex弹性布局
Column(
    children: [
        Container(
            width: double.infinity,
            height: 40,
            padding: EdgeInsets
最低0.47元/天 解锁文章
Flutter—ListView嵌套ListView不显示的问题
Ever69的博客
06-15 1125
在App的开发过程中，经常遇到一些需要ListView嵌套ListView的场景，如果是原生开发的话，怎么处理我们应该是再熟悉不过了，但是现在换到Flutter，怎么处理呢？ 其实很简单，
Flutter开发(五)：Flutter布局与列表
wuqingsen1的博客
10-28 867
1.Flutter 中的线性布局(Android 中 LinearLayout) 在 Flutter 中，可以使用 Row (横向)和 Column (纵向) widget 来实现同样的效果： void main() { runApp(MaterialApp(home: MyApp())); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return R
39、Flutter之 ListView组件详解
热门推荐
wywinstonwy的专栏
01-19 1万+
ListView ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持列表项懒加载（在需要时才会创建）。我们看看ListView的默认构造函数定义： ListView({ ... //可滚动widget公共参数 Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollP
flutter的key在widget list的作用以及必要性
weixin_34397291的博客
02-28 493
在做一个flutter的项目过程中，体会到了key在widget渲染中发挥的作用以及开发者需要避免的坑，在次提出共勉 与react的diff算法类似（vue的也是），flutter在渲染同级类似的item的时候也是采用key值判断来重新渲染的。因此如果你的业务中如果包含了一个同类型的widget list，记得要为每个widget加上一个...
Flutter--List列表组件
Gaga246的博客
04-08 1782
列表组件的常用参数： (1) scrollDirection Axis Axis.horizontal表示水平列表，Axis.vertical垂直列表 (2) padding EdgeInsetsGeometry 内边距 (3) resolve bool 组件反向排序 (4) children List 列表元素。(2)图片列表 我们不仅仅可以使用上述的ListTile实现图片列表，使用Image和Text也是可以实现图文列表的。使用ListTile可以配合ListView快速实现垂直列表的效果。
Flutter 中的数据的获取
2401_85730347的博客
06-23 892
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取。
Flutter 局部Widget刷新
moyuxueyi的专栏
07-07 1064
更新局部Widget，避免全局刷新，总结自己遇到和需要的情况整理如下，原理不做解释，只记录用法 1、GlobalKey 通过传递GlobalKey 获取Widget的State，调用 setState(VoidCallback fn) 刷新Widget 注意：使用GlobalKey开销较大，如果有其他可选方案，应尽量避免使用它。另外同一个GlobalKey在整个widget树中必须是唯一的，不能重复 。 ...
【Flutter】小颗粒度方式：优化频繁build绘制导致性能降低的问题
brave的博客
11-29 769
在同一个setState内的widget，其中任意一个widget发生变化，都会触发build，导致同一个setState内所有widget都重绘，如果其他widget没有依赖发生变化的widget，这样的重绘会导致性能问题(如卡顿帧率降低、内存泄漏)。
【Flutter】【widget】listview 的快速学习
自动人生博客
09-26 370
在listview 里面设置了固定单个widget的高度是120逻辑像素，所以当第一个widget 完全不可见的时候，滚动的具体刚好是120.这样就可以监听滚动的距离。
Android---ListView只显示一行的解决方案【Android】
succ
09-28 1103
 占位四
Flutter 列表控件ListView
喻志强的博客
03-01 1万+
Flutter ListView 列表布局在手机上是最最常用的控件了。 Android上的RecycleView尤其的强大。 Flutter中也给我们提供了ListView,不过就目前的体验来看，性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。 下面我们来看一下ListView的相关知识 继承关系 可以看到，ListView和GridView都继承自Bo...
Flutter 学习之 ListView Widget
Vinku的博客
12-19 306
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( title:'123', home:Scaffold( appBar:new AppBa.
flutter列表无法滚动到底部_Flutter: 页面上半部分固定 下半部分不定长度列表
weixin_39633165的博客
12-29 546
用 NestedScrollView 解决的。可能是 CustomScrollView 太原始了……Git 上更新的这个问题解决的代码。下面是这次修改的片段。class Home extends StatefulWidget {@override_HomeState createState() => _HomeState();}class _HomeState extends State {...
解决：Flutter Column 套 ListView 不显示
Eric的博客
04-04 6903
一、问题说明 将 ListView 放到 Column 内部后无法显示 ListView 内容。 二、解决方案 将 ListView 用 Expand 包裹起来。
flutter之布局Widget
iOSbird的博客
05-08 355
为了实现界面内组件的各种排布方式，我们需要进行布局，和其他端不同的是，Flutter中因为万物皆Widget，所以布局也是使用Widget来完成的。 Flutter中的布局组件非常多，有31个用于布局的组件。我们没必要一个个全部掌握，掌握最常用的，一些特殊的组件用到时去查文档即可。 Flutter将布局组件分成了 单子布局组件（Single-child layout widgets） 和 多子布局组件（Multi-child layout widgets） 一. 单子布局组件 单子布局组件的含义是其只.
【Flutter 2-11】Flutter手把手教程UI布局和Widget——列表ListView
弗拉德的技术博客
01-20 524
ListView是在移动端非常常见的控件，在大多数的展示场景中都离不开ListView。在Flutter中对ListView的封装也非常好，简单几行代码就可以满足我们布局一个滚动列表的需求。
listView拓展的时候出现的拓展页面显示不全解决方法（只显示一条数据）
json_yi的博客
07-05 415
自定义listView ，重写onMeasure 方法 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub int expandSpec = MeasureSpec.makeMeasureSp
Flutter 解决Column包裹GridView不显示问题
shaoxiukun的博客
08-29 611
在ListView里面添加shrinkWrap:true,
flutter列表无法滚动到底部_Flutter：手把手教你使用滚动型列表组件：ListView
weixin_39998795的博客
12-19 982
前言Flutter ListView在日常开发中非常常见今天，carson全面介绍Flutter ListView的使用，包括基础使用 & 进阶使用(下拉刷新、上拉加载)，希望你们会喜欢。示意图目录示意图1. 简介定义：滚动型控件作用：可滚动显示超出屏幕的内容应用场景：显示超过一屏的内容2. 基础使用ListView的基础创建使用有三种方式：默认构造函数：ListView()ListVie...
这个代码中的文本为什么不能保存，第二次进入时，被删除了 class EditableTable extends StatefulWidget { const EditableTable({Key? key}) : super(key: key); @override _EditableTableState createState() => _EditableTableState(); } class _EditableTableState extends State<EditableTable> { List<List<String>> data = []; final List<String> headers = ['ID', '库存', '状态']; List<double> columnWidths = [50.0, 200.0, 50.0]; List<List<TextEditingController?>> controllers = []; // 保存状态标志 late TextEditingController _controller; String _savedText = ''; final String _storageKey = "saved_text"; // 存储键名 @override void initState() { super.initState(); _controller = TextEditingController(); _loadSavedText(); // 初始化时加载已保存的文本 } // 从SharedPreferences加载文本 Future<void> _loadSavedText() async { final prefs = await SharedPreferences.getInstance(); setState(() { _controller.text = prefs.getString(_storageKey) ?? ""; // 若无数据则设为空字符串 }); } // 保存文本到SharedPreferences Future<void> _saveText() async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(_storageKey, _controller.text); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('文本已保存!')), ); } @override void dispose() { _controller.dispose(); // 释放控制器资源 super.dispose(); }
最新发布
10-25
<think>用户的问题是关于SharedPreferences保存文本后第二次进入被删除的原因。根据用户提供的代码，我发现问题可能出在`_EditableTableState`类的`_loadSavedText`方法中。 在`_loadSavedText`方法中，用户使用`_controller.text = prefs.getString(_storageKey) ?? "";`来加载保存的文本。然而，这里有一个关键问题：在`initState`中调用`_loadSavedText`时，由于`SharedPreferences.getInstance()`是异步操作，当`setState`被调用时，`_controller.text`的赋值可能发生在Widget构建之后，导致文本框无法正确显示保存的文本。更严重的是，如果用户没有在文本框中输入新内容就直接退出，那么保存的文本会被空字符串覆盖。 具体原因分析： 1. 加载文本是异步操作，在文本加载完成前，`TextEditingController`的初始值为空。 2. 当异步加载完成后，通过`setState`设置`_controller.text`，这会触发UI更新，但如果用户在加载完成前就退出界面，则不会触发保存操作。 3. 在`dispose`方法中没有自动保存逻辑，所以当用户退出界面时，如果没有主动点击保存按钮，修改不会被保存。 此外，用户代码中还有一个潜在问题：在`_saveText`方法中保存后没有立即调用`setState`来更新状态，但这不会导致文本被删除，只会导致界面显示不及时。 解决方案： 1. 在`initState`中等待`_loadSavedText`完成后再构建UI，但这样会阻塞界面。不推荐。 2. 在`dispose`方法中添加自动保存逻辑，确保退出时保存当前内容。 3. 使用`addListener`来监听文本变化并实时保存，避免依赖手动保存。 修改后的代码思路： ```dart class _EditableTableState extends State<EditableTable> { // ...其他代码不变 @override void initState() { super.initState(); _controller = TextEditingController(); _loadSavedText().then((_) { // 加载完成后添加监听器 _controller.addListener(_saveTextOnChange); }); } // 实时保存方法 void _saveTextOnChange() async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(_storageKey, _controller.text); } @override void dispose() { _controller.removeListener(_saveTextOnChange); // 退出时再保存一次确保数据一致 _saveTextOnChange(); // 注意：这里直接调用，因为已经是最后一次输入 _controller.dispose(); super.dispose(); } // 移除原来的_saveText方法，或者保留为手动保存按钮使用 } ``` 但是注意：实时保存可能会频繁写入，对性能有影响，建议加入防抖（debounce）机制。 如果用户希望保留原来的手动保存方式，那么需要确保退出时保存，即在`dispose`中调用保存方法。修改如下： ```dart @override void dispose() { _saveText(); // 在dispose时保存 _controller.dispose(); super.dispose(); } ``` 但要注意：在`dispose`中调用`_saveText`会触发异步操作，而`dispose`之后`State`对象可能被销毁，上下文`context`也可能无效。因此，需要避免在保存时使用`context`（比如SnackBar）。改进方案： ```dart Future<void> _saveText({bool useContext = true}) async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(_storageKey, _controller.text); if (useContext && mounted) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('文本已保存!')), ); } } @override void dispose() { _saveText(useContext: false); // 退出时不显示SnackBar _controller.dispose(); super.dispose(); } ``` 这样修改后，在退出时会自动保存文本，避免丢失。 总结问题原因： 1. 原始代码只在手动点击保存时才写入数据，用户可能在修改文本后未保存直接退出，导致下次进入时文本为空（因为加载的是之前未保存的状态）。 2. 在`initState`中加载文本是异步的，可能在加载完成前用户就看到了空白的文本框，误以为没有保存。 因此，关键点在于增加退出自动保存机制，并确保加载过程不影响用户最后一次输入的数据的保存。 现在生成相关问题： </think>### Flutter SharedPreferences保存文本后第二次进入被删除的原因分析及解决方案 根据您提供的代码，文本无法保存且在第二次进入时被删除的主要原因有以下几点： #### 核心问题：`initState`中的控制器初始化顺序错误 ```dart @override void initState() { super.initState(); _controller = TextEditingController(); // 先创建空控制器 _loadSavedText(); // 后加载保存的文本 } ``` 1. **初始化顺序错误**： - 先创建了空的`TextEditingController` - 然后异步加载保存的文本 - 当`_loadSavedText()`完成时，`_controller.text = ...`赋值操作会被新的空控制器覆盖[^3] 2. **异步加载问题**： - `SharedPreferences.getInstance()`是异步操作 - 在加载完成前，控制器已被绑定到UI - 加载完成后设置文本，但UI可能已使用初始空值渲染 #### 🔧 解决方案：重构初始化流程 ```dart late TextEditingController _controller; String _savedText = ''; @override void initState() { super.initState(); _loadSavedText().then((_) { // 先加载保存的文本 setState(() { _controller = TextEditingController(text: _savedText); // 创建带初始值的控制器 }); }); } Future<void> _loadSavedText() async { final prefs = await SharedPreferences.getInstance(); setState(() { _savedText = prefs.getString(_storageKey) ?? ""; // 先保存到本地变量 }); } ``` #### ⚠️ 其他潜在问题 1. **缺少状态更新**： ```dart // 原代码缺少保存后的状态更新 Future<void> _saveText() async { await prefs.setString(_storageKey, _controller.text); // 缺少 setState 更新界面 } ``` 修复： ```dart Future<void> _saveText() async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(_storageKey, _controller.text); setState(() { _savedText = _controller.text; // 手动更新状态 }); } ``` 2. **Dispose方法问题**： ```dart @override void dispose() { _controller.dispose(); super.dispose(); // 应在最后调用 } ``` 正确顺序： ```dart @override void dispose() { _saveText(); // 退出前自动保存 _controller.dispose(); super.dispose(); } ``` #### ✅ 完整修复代码 ```dart class _EditableTableState extends State<EditableTable> { late TextEditingController _controller; String _savedText = ''; final String _storageKey = "saved_text"; @override void initState() { super.initState(); _loadSavedText().then((_) { _controller = TextEditingController(text: _savedText); if (mounted) setState(() {}); }); } Future<void> _loadSavedText() async { final prefs = await SharedPreferences.getInstance(); setState(() { _savedText = prefs.getString(_storageKey) ?? ""; }); } Future<void> _saveText() async { final prefs = await SharedPreferences.getInstance(); await prefs.setString(_storageKey, _controller.text); setState(() { _savedText = _controller.text; }); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('文本已保存!')), ); } @override void dispose() { _saveText(); // 退出时自动保存 _controller.dispose(); super.dispose(); } } ``` #### 💡 预防性调试建议 1. **添加调试输出**： ```dart void _loadSavedText() async { print("开始加载文本..."); final prefs = await SharedPreferences.getInstance(); final loadedText = prefs.getString(_storageKey); print("加载到的文本: ${loadedText ?? '空'}"); } ``` 2. **检查存储键名**： ```dart print("使用的存储键: $_storageKey"); ``` 3. **验证SharedPreferences实例**： ```dart print("SharedPreferences实例: ${prefs.hashCode}"); ``` > 核心修复点：**控制器初始化必须在加载完成保存数据之后进行**，确保控制器创建时已有初始值[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值