You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TextField文本填满宽度时出现异常问题求助

TextField文本填满宽度时出现异常问题求助

各位好,我现在碰到一个Flutter TextField的奇怪问题:当输入的文本填满输入框的宽度时就会出现异常显示,但文本没填满之前一切都正常。我已经排查了各种可能的原因,还是没找到解决办法,特意来求助!

另外我已经把问题相关的截图附在我的草稿里了,麻烦各位帮忙看看,怎么才能解决这个问题?

下面是我的代码:

import 'package:flutter/material.dart';

import 'package:kancerx/infrastructure/utils/supporting_files/colors.dart';

import 'package:kancerx/presentation/common_widget/textform_field.dart';

import 'package:kancerx/presentation/theme/app_theme.dart';

class CustomSearchBar extends StatefulWidget {

final Function(String) onTextChanges;

const CustomSearchBar({super.key, required this.onTextChanges});

@override

State<CustomSearchBar> createState() => _CustomSearchBarState();

}

class _CustomSearchBarState extends State<CustomSearchBar> {

TextEditingController searchController = TextEditingController();

bool isEmptyText = true;

@override

Widget build(BuildContext context) {

return Container(

width: double.infinity,

height: 60,

color: ColorsManager.primaryVariant,

child: Padding(

padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),

child: Container(

height: 40,

decoration: BoxDecoration(

color: Colors.white,

borderRadius: BorderRadius.circular(10),

),

child: Padding(

padding: const EdgeInsets.only(left: 8, right: 0),

child: Stack(

children: [

Row(

children: [

Expanded(

child: Padding(

padding: EdgeInsets.only(

bottom: 5, left: isEmptyText ? 26 : 0),

child: TextField(

textInputAction: TextInputAction.search,

onChanged: (text) {

if (text.length > 3) {

widget.onTextChanges(text);

}

setState(() {

isEmptyText = text.isEmpty;

});

},

style: AppTheme.basicTheme.textTheme.bodyMedium

?.copyWith(fontSize: 17, color: Colors.grey),

decoration: const InputDecoration(

border: InputBorder.none,

focusedBorder: InputBorder.none,

enabledBorder: InputBorder.none,

disabledBorder: InputBorder.none,

focusColor: Colors.transparent,

),

controller: searchController,

),

),

),

Visibility(

visible: !isEmptyText,

child: Align(

alignment: Alignment.center,

child: IconButton(

onPressed: () {

setState(() {

searchController.text = "";

isEmptyText = true;

});

},

icon: const Icon(Icons.clear, color: Colors.grey),

),

),

),

],

),

if (isEmptyText)

const Align(

alignment: Alignment.centerLeft,

child: Padding(

padding: EdgeInsets.only(left: 0),

child: Icon(Icons.search, color: Colors.grey),

),

),

if (isEmptyText)

Align(

alignment: Alignment.centerLeft,

child: Padding(

padding: const EdgeInsets.only(left: 30),

child: Text(

"Search",

style: AppTheme.basicTheme.textTheme.bodyMedium

?.copyWith(fontSize: 17, color: Colors.grey),

),

),

),

],

),

),

),

),

);

}

}

备注:内容来源于stack exchange,提问作者Naveen Kumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.21 12:10:26