flutter 如何在文本表单域中对齐项目？

11dmarpk 于 2023-02-16 发布在 Flutter

关注(0)|答案(1)|浏览(125)

如何正确地对齐前缀图标、hintText、用户输入的实际值和后缀图标？我使用textformfield来做这个。

Widget yourNameWidget(yourNameCtrlr) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 0.0),
    child: TextFormField(
      style: const TextStyle(fontFamily: 'Poppins', fontSize: 12),
      controller: yourNameCtrlr,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(18),
        isDense: true,
        prefixIcon: const Icon(Icons.person),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xFFCECECE)),
          borderRadius: BorderRadius.circular(12),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Color(0xFFCECECE)),
        ),
// this does not align with the prefix and the hint text
        suffix: GestureDetector(
          onTap: () {
            yourNameCtrlr.clear();
          },
          child: const Icon(
            Icons.clear,
            size: 16,
          ),
        ),
        hintText: 'Your Name',
        fillColor: const Color(0xFFFEFEFE),
        filled: true,
      ),
      validator: (value) {
        if (value!.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(value)) {
          return "Please enter a valid name.";
        } else {
          return null;
        }
      },
      onChanged: (value) {},
    ),
  );
}

我想它的三个（前缀，提示文本，后缀）应该是对齐的。这里是文本表单域的预览图像
https://prnt.sc/BxYxnZx1G5od

flutter

来源：https://stackoverflow.com/questions/75467206/how-to-align-items-inside-textformfields

1条答案

按热度按时间

xzv2uavs1#

我使用了这种类型的textformfield，请参见下面的参考：

TextFormField(
                      controller: textEditingController,
                      cursorColor: AppTheme.secondaryColor,
                      autofocus: true,
                      onChanged: (txt) {                 
                      },          
                      style: const TextStyle(
                          fontSize: 16.0, color: 
                        Color.fromARGB(255,4,4,4)),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: AppTheme.secondaryColor_30,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: AppTheme.secondaryColor_30,
                          ),
                        ),
                        hintText: 
                               StringConstants.searchForAGroupOrFriend,
                        hintStyle: Theme.of(context)
                            .textTheme
                            .caption!
                            .copyWith(color: AppTheme.grey2),
                        fillColor: AppTheme.secondaryColor_10,
                        contentPadding: const EdgeInsets.only(top: 10),
                        filled: true,
                        prefixIcon: GestureDetector(
                          onTap: () {
                           
                          },
                          child: Image.asset(
                            Assets.icBackRound,
                            scale: 3.5,
                            color: AppTheme.backDarkGrey,
                          ),
                        ),
                        suffixIcon: GestureDetector(
                          child: Image.asset(
                            Assets.searchIcon,
                            color: AppTheme.secondaryColor,
                            scale: 3.5,
                          ),
                          onTap: () {
                          },
                        ),
                      ),
                    ),

赞(0）回复(0）举报 2023-02-16

我来回答

flutter 如何在文本表单域中对齐项目？

1条答案

相关问题

热门标签

最新问答