Flutter Drawer右侧留白及拖拽闪烁问题求助

一、右侧留白问题 #

问题根源是CustomDrawer中Drawer的子组件Column默认对齐方式导致的。Column默认crossAxisAlignment为CrossAxisAlignment.center，使得内部子组件没有完全占满Drawer的宽度，从而出现右侧留白。

修复方法：给Column添加crossAxisAlignment: CrossAxisAlignment.stretch，强制子组件横向占满容器宽度：

return Drawer(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch, // 新增该行
    children: [
      // 原头部Container代码
      Expanded(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            // 原列表项代码
          ],
        ),
      ),
    ],
  ),
);

二、拖拽滑动闪烁问题 #

闪烁多因布局层级冗余、性能不足导致帧丢失，或是组件动画与滚动逻辑冲突，可通过以下两点优化：

1. 简化布局结构 #

当前Column嵌套ListView的结构可优化为直接用ListView包含头部和列表项，减少嵌套层级，提升绘制性能：

@override
Widget build(BuildContext context) {
  Widget _drawerItems({String? text, IconData? icon, String? route}) {
    return ListTile(
      leading: icon == null ? null : Icon(icon),
      title: Text(text!),
      onTap: () {
        Navigator.of(context)
            .pushNamedAndRemoveUntil(route!, (route) => false);
      },
    );
  }

  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        // 将头部作为ListView的第一个item
        Container(
          height: 150,
          color: const Color.fromARGB(255, 10, 11, 102),
          child: const Center(
            child: Text(
              'Welcome',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
        // Home项
        _drawerItems(
          text: 'Home',
          icon: Icons.home_outlined,
          route: homeScreenRoute,
        ),
        ExpansionTile(
          title: const Text('Products'),
          leading: const Icon(Icons.production_quantity_limits),
          children: [
            _drawerItems(
              text: 'All Products',
              route: productScreenRoute,
            ),
            _drawerItems(
              text: 'Add Products',
              route: addProductScreenRoute,
            ),
          ],
        ),
      ],
    ),
  );
}

2. 优化Drawer绘制行为 #

给Drawer添加clipBehavior: Clip.hardEdge，减少不必要的裁剪计算，提升动画流畅度：

return Drawer(
  clipBehavior: Clip.hardEdge, // 新增该行
  child: ListView(
    // 其他代码
  ),
);

总结 #

这两个问题均不属于设备问题，而是组件使用时的布局细节和性能优化疏漏。通过调整Column对齐方式解决留白，简化布局+裁剪优化解决闪烁，在Redmi Note 7这类设备上可有效改善体验。

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