Flutter实现组件触达窗口底部时修改圆角半径的方案

要实现内容较多时容器底部圆角变为0的效果，核心是动态判断容器是否已撑满到窗口底部，然后更新圆角参数。具体实现步骤如下：

• 将MyHomePage改为StatefulWidget，用于维护动态变化的圆角状态
• 使用GlobalKey获取滚动组件的渲染信息，计算内容实际高度
• 对比内容高度与可用屏幕高度（屏幕总高度减去顶部50px的margin），判断是否触底
• 根据触底状态更新底部圆角值，通过setState刷新UI

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _scrollKey = GlobalKey();
  double _bottomRadius = 16;

  @override
  void initState() {
    super.initState();
    // 等待组件渲染完成后计算高度
    WidgetsBinding.instance.addPostFrameCallback((_) => _checkIfBottomReached());
  }

  void _checkIfBottomReached() {
    final renderObject = _scrollKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderObject == null) return;

    // 获取内容实际高度
    final contentHeight = renderObject.size.height;
    // 获取屏幕可用高度：总高度 - 顶部margin的50px
    final screenAvailableHeight = MediaQuery.of(context).size.height - 50;

    setState(() {
      // 如果内容高度大于等于可用高度，说明容器已撑满到窗口底部，底部圆角设为0
      _bottomRadius = contentHeight >= screenAvailableHeight ? 0 : 16;
    });
  }

  @override
  Widget build(BuildContext context) {
    const radiusTop = Radius.circular(16);
    final radiusBottom = Radius.circular(_bottomRadius);

    return Stack(
      children: [
        Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.black.withOpacity(0.3),
        ),
        Center(
          child: Container(
            margin: const EdgeInsets.only(top: 50),
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                topLeft: radiusTop,
                topRight: radiusTop,
                bottomLeft: radiusBottom,
                bottomRight: radiusBottom,
              ),
            ),
            child: SingleChildScrollView(
              key: _scrollKey,
              child: Column(
                children: [
                  for (int i = 0; i < 20; i++)
                    Container(
                      width: 200,
                      padding: const EdgeInsets.all(16),
                      child: Text(
                        "item $i",
                        style: const TextStyle(
                          fontSize: 20,
                          color: Colors.black,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

关键逻辑说明 #

1. GlobalKey的作用：通过它获取SingleChildScrollView的渲染对象，从而拿到内容的实际高度。
2. PostFrameCallback：确保在组件完成第一次渲染后再计算高度，避免获取到空的渲染对象。
3. 高度对比：用屏幕总高度减去顶部的50px margin，得到容器可占用的最大高度。如果内容高度超过这个值，说明容器已经撑满到窗口底部，此时将底部圆角设为0。

如果需要支持内容动态变化（比如后续添加/删除列表项），只需要在内容更新后调用_checkIfBottomReached()方法重新计算即可。

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