时间戳

首页 > 解决方案 > 将字段文本缩小到比提示文本更小的宽度

flutter - 将字段文本缩小到比提示文本更小的宽度

问题描述

我会链接到创建一个TextField缩小到里面的文本。为此，我使用了这个说使用小部件的答案IntrinsicWidth。它工作得很好，但是如果我指定 a hintText，即使用户输入了非常短的文本，它的宽度TextField也不会小于的宽度。hintText

这是一个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            alignment: Alignment.center,
            height: 50,
            width: 300,
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              color: Colors.grey[100],
              child: IntrinsicWidth(
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'My very very long hint', // Remove it and the text field can be as small as the text inside
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这是一个没有提示和小文本的文本字段： 在此处输入图像描述

文本域的宽度就是里面文本的宽度，就是我想要的。✔️

这是带有提示的空字段： 在此处输入图像描述

没有文本的时候，文本域的宽度就是提示的宽度，这就是我想要的。✔️

这是带有提示的文本字段，其中包含提示的长文本： 在此处输入图像描述

字段的宽度就是里面文字的宽度，这就是我想要的。✔️

这是一个带有提示和小文本的非空字段： 在此处输入图像描述

如您所见，字段宽度是提示的宽度，而不是里面的文本（这不是我想要的 ❌）。

如何强制它成为内部实际文本的宽度？

标签： flutterdarttextfield

解决方案

hintText您可以根据您的内容有条件地更改TextEditingController：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() => runApp(MyApp());

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _controller = useTextEditingController();
    final _editing = useState(false);
    _controller.addListener(() => _editing.value = _controller.text.isNotEmpty);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            alignment: Alignment.center,
            width: 300,
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              color: Colors.grey[100],
              child: Column(
                children: [
                  IntrinsicWidth(
                    child: TextFormField(
                      controller: _controller,
                      decoration: InputDecoration(
                        hintText: _editing.value
                            ? '' // empty hintText if field is not empty
                            : 'My very very long hint',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

推荐阅读