Mackit 신제품

Mackit — macOS 개발자 캐시 클리너:Xcode / Node / Flutter 등이 남긴 재생성 가능한 캐시를 스캔하고 항목별 위험을 표시해 디스크 공간을 되찾으세요

자세히 보기
안내 2024년 6월부터 개발자 게시판의 새 글 업데이트를 중단했습니다. 방문해 주셔서 감사합니다. 아카이브 글
前端

在Flutter中如何取消焦点时的底部边框?

在Flutter中,可以使用Container和Focus组件以及InputBorder.none属性来实现取消焦点时的底部边框。下面是一种常常出现在大家视野里的方法:

  1. 创建一个Container组件,作为包装器以及可聚焦的子组件的容器。
Container(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(color: Colors.grey[400]), // 底部边框颜色),),
  child: Focus(
    onFocusChange: (hasFocus) {// 当焦点状态改变时调用,可以在这里添加逻辑来控制底部边框的显示和隐藏},
    child: TextField(
      decoration: InputDecoration(
        border: InputBorder.none, // 取消输入框的边框
        hintText: 'Enter text',),),),
);

在上面的代码中,Container组件是一个包装器,用于设置底部边框。Focus组件用于监听焦点状态的变化。然后,使用TextField作为可聚焦的子控件。InputDecoration的border属性设置为InputBorder.none,这样就取消了输入框的边框。

您还能够依据具体的需求在onFocusChange回调中添加逻辑,根据焦点状态来控制底部边框的显示和隐藏。