Flutter中Column、Expanded与ScrollView渲染错误排查求助

问题概述 #

在Flutter聊天页面开发中，出现大量渲染错误，涉及布局断言失败及多个组件的渲染异常，推测由Column、Expanded与ScrollView的嵌套使用方式不当导致，多次调整后仍未解决。

错误日志片段 #

(elided 6 frames from class _AssertionError, class
 _RawReceivePortImpl, class _Timer, and dart:async-patch) The following RenderObject was being processed when the exception was fired:
 RenderFlex#357da relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT
 NEEDS-COMPOSITING-BITS-UPDATE RenderObject: RenderFlex#357da
 relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT
 NEEDS-COMPOSITING-BITS-UPDATE
     needs compositing
 
 child 1: RenderPositionedBox#2911a relayoutBoundary=up13 NEEDS-PAINT
 NEEDS-COMPOSITING-BITS-UPDATE
         parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
         constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
         size: Size(392.7, 36.0)
         alignment: Alignment.center
         textDirection: ltr
         widthFactor: expand
         heightFactor: expand
         child: RenderSemanticsAnnotations#3a796 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
             parentData: offset=Offset(178.4, 0.0) (can use size)
             constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
             size: Size(36.0, 36.0)
             child: RenderConstrainedBox#b58da relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE parentData: <none> (can use
 size)
                 constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
                 size: Size(36.0, 36.0)
                 additionalConstraints: BoxConstraints(36.0<=w<=Infinity, 36.0<=h<=Infinity)
                 child: RenderCustomPaint#a2388 relayoutBoundary=up16 NEEDS-PAINT
                     parentData: <none> (can use size)
                     constraints: BoxConstraints(36.0<=w<=392.7, 36.0<=h<=Infinity)
                     size: Size(36.0, 36.0)
                     painter: _CircularProgressIndicatorPainter#971dd()

核心报错信息 #

The relevant error-causing widget was SingleChildScrollView
The relevant error-causing widget was Container The relevant
error-causing widget was Scaffold

'package:flutter/src/rendering/object.dart': Failed assertion: line
1840 pos 12: '!_debugDoingThisLayout': is not true. The relevant
error-causing widget was Column

相关代码 #

ChatScreen类 #

class ChatScreen extends StatelessWidget{
  final user = FirebaseAuth.instance.currentUser!;
  final String chatWithName;
  final Future<bool> flag;
  ChatScreen(this.chatWithName, this.flag);
  

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text(chatWithName), centerTitle: true,),

      body: Container(
        height: 200,
        child: SingleChildScrollView(
          child: Column(
          children: <Widget>[
            //  Expanded(
            //    child: messages()),
               messages(),
              newMessage(flag),
          ],
        ) ,

        )
        ),
       
    );
  }
}

newMessage组件 #

Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 8),
      padding: EdgeInsets.all(8),
      child: Row(
        children: <Widget>[
          Expanded(
              child: TextField(
            controller: _controller,
            onChanged: (value) {
              setState(() {
                _enterdMessage = value;
              });
            },
          )
          ),
          IconButton(
              //onPressed: _enterdMessage.trim().isEmpty ? null : _sendMessage,
              onPressed: (){
                if(_enterdMessage.trim().isEmpty == true){
                  return null;
                }
                else{
                  if(widget.roomExist==true){
                    notFirstTime();
                  }else{
                    if(widget.roomExist==false){
                    firstTime();
                  }
                  }
                }
              },
              icon: Icon(Icons.send))
        ],
      ),
    );
  }
}

messages组件 #

Widget build(BuildContext context) {

    return FutureBuilder<User>(
        future: Future.value(FirebaseAuth.instance.currentUser),
        builder: (context, futureSnapshot){
          if(futureSnapshot.connectionState == ConnectionState.waiting){
            return Center(child: CircularProgressIndicator(),);
      }
           return StreamBuilder <QuerySnapshot>(
      stream: firestore.collection('chats').orderBy('timeStamp', descending: true).snapshots(),
      builder:(ctx, chatSnapshot){
      if(chatSnapshot.connectionState == ConnectionState.waiting){
        return Center(child: CircularProgressIndicator(),);
      }
      final chatdocs = chatSnapshot.data!.docs;
      
      //i think here is where we check if they have the same roomid or not
      return ListView.builder(
        shrinkWrap: true,
        reverse: true,
        itemCount: chatdocs.length, 
        itemBuilder: (ctx, index) => messageBubble(
          chatdocs[index]['text'],
          chatdocs[index]['userId'] == futureSnapshot.data!.uid, //this is the error- udemy 335 minute 7:26
          //chatdocs[index]['username'],
          ),
          
        );
        }
        );
    } );
  }
}

修复方案及代码调整 #

核心问题分析 #

• 原布局中SingleChildScrollView嵌套带shrinkWrap: true的ListView，导致双重滚动逻辑冲突，且固定高度的Container限制了布局空间，引发RenderFlex无限高度断言错误。
• !_debugDoingThisLayout错误源于布局过程中组件反复请求重绘，通常由约束不明确的嵌套滚动或无限扩展的Flex组件导致。

具体修复步骤 #

1. 重构ChatScreen布局结构
   移除固定高度的Container和外层SingleChildScrollView，改用Column+Expanded的经典聊天页面布局：让消息区域占据屏幕除输入框外的所有空间，输入框固定在底部。

2. 调整messages组件的ListView
   移除shrinkWrap: true，让ListView根据父组件（Expanded）的约束自动计算高度，避免无限制扩展。

修改后代码 #

ChatScreen类

class ChatScreen extends StatelessWidget{
  final user = FirebaseAuth.instance.currentUser!;
  final String chatWithName;
  final Future<bool> flag;
  ChatScreen(this.chatWithName, this.flag);

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text(chatWithName), centerTitle: true,),
      body: Column(
        children: <Widget>[
          // 让消息区域占据剩余空间
          Expanded(child: messages()),
          // 输入框固定在底部
          newMessage(flag),
        ],
      ),
    );
  }
}

messages组件的ListView部分

// 移除shrinkWrap: true，保留reverse属性实现消息倒序
return ListView.builder(
  reverse: true,
  itemCount: chatdocs.length, 
  itemBuilder: (ctx, index) => messageBubble(
    chatdocs[index]['text'],
    chatdocs[index]['userId'] == futureSnapshot.data!.uid,
  ),
);

修复说明 #

• 移除嵌套的SingleChildScrollView后，由ListView单独处理消息列表的滚动，避免滚动逻辑冲突。
• Expanded确保消息区域自适应剩余屏幕空间，输入框始终固定在底部，布局约束明确，消除了无限高度的断言错误。
• 去掉shrinkWrap: true后，ListView会根据父组件的约束高效渲染列表项，避免不必要的布局重绘，解决!_debugDoingThisLayout错误。

内容的提问来源于stack exchange，提问作者Filwah Ah