Flutter中Expanded+SingleChildScrollView导致组件重叠问题求助

你遇到的是滚动区域内容溢出未被裁剪，导致覆盖上方固定组件的问题，下面几个实用方法可以快速解决：

方法一：给SingleChildScrollView添加裁剪行为 #

直接为SingleChildScrollView设置clipBehavior属性，让超出滚动区域的内容被裁剪，就不会覆盖上方组件了：

Expanded(
  child: SingleChildScrollView(
    clipBehavior: Clip.hardEdge, // 关键属性，可选Clip.antiAlias更平滑
    child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
          for (var L in _empLog.value) logListTile(L)
       ],
     ),
  )
)

方法二：给上方固定区域添加背景色 #

如果页面是纯色背景，给日历、文本所在的父容器设置和页面一致的背景色，这样即使ListTile滚上来也会被背景遮挡：

Padding(
padding:
    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 给固定区域套Container加背景
    Container(
      color: Colors.white, // 替换成你的页面实际背景色
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ValueListenableBuilder(
              valueListenable: _selectedDate,
              builder: (context, value, child) {
                return TableCalendar(
                    focusedDay: _selectedDate.value,
                    firstDay: DateTime(1900),
                    lastDay: DateTime(2100),
                    calendarFormat: CalendarFormat.week,
                    calendarStyle: const CalendarStyle(
                        defaultTextStyle:
                            TextStyle(color: Colors.grey)),
                    headerStyle: const HeaderStyle(
                        formatButtonVisible: false,
                        titleCentered: true,
                        titleTextStyle: TextStyle(fontSize: 16),
                        headerPadding: EdgeInsets.zero),
                    calendarBuilders: CalendarBuilders(
                      // 你的builder内容
                    ));
              }),
          Padding(
              padding: const EdgeInsets.only(top: 15),
              child: Text('data',
                  style: const TextStyle(
                      fontSize: 16, fontWeight: FontWeight.w500))),
          const Text('Location Updates',
              style: TextStyle(
                  fontSize: 16, fontWeight: FontWeight.w500)),
        ],
      ),
    ),
    Expanded(
        child: SingleChildScrollView(
            child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                  for (var L in _empLog.value) logListTile(L)
               ],
             ),
     ))
  ],
)),

方法三：用ListView替代SingleChildScrollView+Column #

如果只是展示ListTile列表，直接用ListView.builder更高效，它默认自带裁剪行为，也能彻底避免覆盖问题：

Expanded(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: _empLog.value.length,
    itemBuilder: (context, index) {
      return logListTile(_empLog.value[index]);
    },
  )
)

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