文本通过边框颤动

Question

我想通过颤振中的容器边框添加文本。

我只希望该地址通过顶部边框之间的间隙出现。使用定位小部件似乎不可能，因为边界线将通过“地址”文本出现。

有可能吗？

Answer 1

这是你想要的吗？

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  FocusNode focusNode = FocusNode();
  bool isFocused = false;

  @override
  void initState() {
    focusNode.addListener(_onFocusChange);
    super.initState();
  }

  void _onFocusChange() {
    setState(() => isFocused = !isFocused);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 500, vertical: 300),
        child: Stack(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(top: 10),
              child: TextFormField(
                focusNode: focusNode,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30)),
                ),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Text(
                    'Address',
                    style:
                        isFocused ? TextStyle(color: Colors.blue[800]) : null,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

据我所知，没有办法在 InputDecoration 中将 labelText 居中。

Answer 2

它必须是容器边界吗？如果没有，您可以将 TextField 与 InputDecoration 一起使用，如下所示：

TextField(
     decoration: InputDecoration(
         border: OutlineInputBorder(),
         labelText: 'Label Text',
     ),
     textAlign: TextAlign.center,
),

但遗憾的是，TextField 不支持居中标签文本（textAlign: TextAlign.center,仅居中提示文本）。如果您想让标签文本居中，您必须更改TextField.dart.

这与TextField平常不同，Text因为它是可编辑的。如果你想让它像一个文本，设置enabled: false并给它一个控制器并设置一个初始值。或者您可以使用TextFormField这样就不必使用控制器。像这样：

TextFormField(
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Address',
    ),
    textAlign: TextAlign.center,
    enabled: true,
    initialValue: 'Address Here',
),