Windows平台TextField默认垂直滚动条遮挡内容问题及解决诉求

针对Windows平台下TextField默认垂直滚动条遮挡文本内容的问题，提供两种可行解决方案：

方案一：隐藏默认滚动条 #

通过ScrollConfiguration覆盖默认滚动行为，直接隐藏滚动条：

Container(
  constraints: const BoxConstraints(minHeight: 42),
  decoration: BoxDecoration(
    border: isDisable == true
        ? Border.all(width: 1, color: Colors.transparent)
        : Border.all(
            width: 1,
            color: isError && controller.text.trim().isNotEmpty
                ? red
                : colorA2A7B5.withAlpha((255 * 0.5).toInt()),
          ),
    color: isDisable == true ? colorA2A7B5.withOpacity(0.3) : null,
    borderRadius: BorderRadius.circular(8),
  ),
  child: ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(
      scrollbars: false, // 禁用滚动条
    ),
    child: TextField(
      controller: controller,
      minLines: 1,
      inputFormatters: [
        LengthLimitingTextInputFormatter(maxlength)
      ],
      enabled: !isDisable,
      scrollPadding: EdgeInsets.zero,
      maxLines: 3,
      scrollController: _scrollController,
      decoration: const InputDecoration(
        isDense: true,
        border: InputBorder.none,
        contentPadding: const EdgeInsets.only(
            top: 9.5, bottom: 9.5, right: 16, left: 16),
      ),
      style: Styles.baseNotoSansJPRegular.copyWith(fontSize: 16),
    ),
  ),
)

方案二：自定义滚动条避免遮挡内容 #

若需保留滚动条，可通过Scrollbar组件自定义，并调整TextField内边距为滚动条预留空间：

Container(
  constraints: const BoxConstraints(minHeight: 42),
  decoration: BoxDecoration(
    border: isDisable == true
        ? Border.all(width: 1, color: Colors.transparent)
        : Border.all(
            width: 1,
            color: isError && controller.text.trim().isNotEmpty
                ? red
                : colorA2A7B5.withAlpha((255 * 0.5).toInt()),
          ),
    color: isDisable == true ? colorA2A7B5.withOpacity(0.3) : null,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Scrollbar(
    controller: _scrollController,
    thumbVisibility: true, // 强制显示滚动条（可选）
    child: TextField(
      controller: controller,
      minLines: 1,
      inputFormatters: [
        LengthLimitingTextInputFormatter(maxlength)
      ],
      enabled: !isDisable,
      scrollPadding: EdgeInsets.zero,
      maxLines: 3,
      scrollController: _scrollController,
      decoration: const InputDecoration(
        isDense: true,
        border: InputBorder.none,
        contentPadding: const EdgeInsets.only(
            top: 9.5, bottom: 9.5, right: 24, left: 16), // 增加右侧内边距避开滚动条
      ),
      style: Styles.baseNotoSansJPRegular.copyWith(fontSize: 16),
    ),
  ),
)

说明：方案二中将contentPadding的right值从16调整为24，是为滚动条预留宽度，你可根据实际滚动条宽度微调该数值。

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