TextField 的文本达到文本字段的全宽时出现问题

Question

这是下面的代码，我已经检查了所有我找不到解决方案的可能性。 每当 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),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您应该尝试在

maxLength

中添加参数

maxLengthEnforcement

和

textField

。

TextField(
  maxLength: 50,
  maxLengthEnforcement: MaxLengthEnforcement.enforced,
  // ...
)