Flutter中RenderBox未布局及按钮被遮挡问题求助

开发包含地图和双标签底部面板的页面时，遇到两个问题：

1. 触发大量RenderBox was not laid out渲染异常
2. "Start Shift"按钮被AppBar遮挡，无法点击操作

另一个异常被抛出：RenderBox 未布局：RenderFlex#74196 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderPadding#706cd relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderDecoratedBox#956b2 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderSemanticsAnnotations#a9939 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：_RenderInkFeatures#61b57 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderCustomPaint#7042d relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderPhysicalShape#b51ff relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderPadding#fc79d relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderSemanticsAnnotations#e5880 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：_RenderSingleChildViewport#c29ed NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderIgnorePointer#54d88 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderSemanticsAnnotations#d946f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderPointerListener#1a3b6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderSemanticsGestureHandler#979a1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderPointerListener#991a1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：_RenderScrollSemantics#efef8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderTransform#37b64 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderClipRect#853eb NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderFractionallySizedOverflowBox#de471 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderConstrainedBox#41d25 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：_RenderLayoutBuilder#57ac7 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderStack#4517b relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
另一个异常被抛出：RenderBox 未布局：RenderTransform#37b64

// ignore_for_file: unused_field

import 'package:bottom_drawer/bottom_drawer.dart';
import 'package:busme_driver_app/MainScreen/Map/CheckinMap.dart';
import 'package:busme_driver_app/MainScreen/ShiftPlan/PickDropcontent.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:location/location.dart';
import 'package:permission_handler/permission_handler.dart';
import '../Design/Drawer/custom_drawer.dart';
import '../Design/Drawer/drawer_state.dart';
import '../Reuse/Reuse.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final Location location = Location();
  bool isMapVisible = false;
  bool isShiftStarted = false;
  BottomDrawerController controller = BottomDrawerController();

  @override
  void initState() {
    super.initState();
    requestLocationPermission(); // Request permission when the page is initialized
  }

// Function to request location permission
  Future<void> requestLocationPermission() async {
    final status = await Permission.location.request();

    if (status.isGranted) {
      // Location permission is granted, you can use location services
    } else if (status.isDenied) {
      // Location permission is denied
      // You can show a message to the user or request permission again
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Location permission is required to use this feature.'),
          action: SnackBarAction(
            label: 'Grant',
            onPressed: () {
              // Open app settings to allow the user to grant permission
              openAppSettings();
            },
          ),
        ),
      );
    }
  }

  Future<void> startShift() async {
    final locationData = await location.getLocation();
    final latitude = locationData.latitude;
    print('Latitude: $latitude');
  }

  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    final drawerState = context.watch<DrawerState>();

    return Scaffold(
      key: _scaffoldKey,
      appBar: reusableAppBar(_scaffoldKey, context),
      drawer: const CustomDrawer(),
      body: Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: decorationWithBackground(),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.location_on),
                      SizedBox(width: 5),
                      Text(
                        "LIVE LOCATION",
                        style: TextStyle(
                            fontSize: 26,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ],
                  ),
                  ElevatedButton(
                    child: Text(isShiftStarted ? "End Shift" : "Start Shift"),
                    onPressed: () {
                      if (isShiftStarted) {
                        // Handle End Shift logic here
                      } else {
                        // Handle Start Shift logic here
                        startShift();
                      }
                      setState(() {
                        isMapVisible = !isMapVisible;
                        isShiftStarted = !isShiftStarted; // Toggle visibility
                      });
                    },
                  ),
                  Visibility(
                    visible: isMapVisible,
                    child: Column(
                      children: [
                        LiveMap(), // Show the map when isMapVisible is true
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          DraggableScrollableSheet(
            initialChildSize: 0.30,
            minChildSize: 0.15,
            builder: (BuildContext context, ScrollController scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: PickDrop(),
              );
            },
          ),
        ],
      ),
    );
  }
}

1. 修复按钮被AppBar遮挡问题 #

顶部内容未考虑AppBar和系统状态栏的高度，导致元素被遮挡。用SafeArea包裹核心内容，自动适配状态栏和AppBar高度：

child: SingleChildScrollView(
  child: SafeArea( // 添加SafeArea
    child: Column(
      children: [
        // 原有内容
      ],
    ),
  ),
),

2. 修复RenderBox未布局异常 #

异常核心原因：

• 底层容器设置固定高度MediaQuery.of(context).size.height，和SingleChildScrollView的自适应布局冲突
• LiveMap未设置明确高度，显示时无法确定尺寸

具体修改步骤： #

1. 移除底层Container的固定height属性，让SingleChildScrollView自适应父级空间
2. 给LiveMap设置明确高度，用SizedBox包裹
3. 给DraggableScrollableSheet的内容添加容器约束，避免布局溢出

完整修改后的build方法 #

@override
Widget build(BuildContext context) {
  final drawerState = context.watch<DrawerState>();

  return Scaffold(
    key: _scaffoldKey,
    appBar: reusableAppBar(_scaffoldKey, context),
    drawer: const CustomDrawer(),
    body: Stack(
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          decoration: decorationWithBackground(),
          child: SingleChildScrollView(
            child: SafeArea(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.location_on),
                      SizedBox(width: 5),
                      Text(
                        "LIVE LOCATION",
                        style: TextStyle(
                            fontSize: 26,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ],
                  ),
                  const SizedBox(height: 16), // 添加间距优化布局
                  ElevatedButton(
                    child: Text(isShiftStarted ? "End Shift" : "Start Shift"),
                    onPressed: () {
                      if (isShiftStarted) {
                        // Handle End Shift logic here
                      } else {
                        startShift();
                      }
                      setState(() {
                        isMapVisible = !isMapVisible;
                        isShiftStarted = !isShiftStarted;
                      });
                    },
                  ),
                  if (isMapVisible) // 用if替代Visibility更简洁高效
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.6,
                      child: LiveMap(),
                    ),
                ],
              ),
            ),
          ),
        ),
        DraggableScrollableSheet(
          initialChildSize: 0.30,
          minChildSize: 0.15,
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
              ),
              child: SingleChildScrollView(
                controller: scrollController,
                child: PickDrop(),
              ),
            );
          },
        ),
      ],
    ),
  );
}

内容的提问来源于stack exchange，提问作者Muhd Ashyraf Bin A.Zamri