flutter 如何将文本字段的标签转移到前缀图标而不是文本的顶部

wj8zmpe1  于 2023-02-05  发布在  Flutter
关注(0)|答案(3)|浏览(179)

在flutter的textField中,当我们使用prefixIcon和label时,在焦点模式下,label的动画会转移到文本的顶部(而不是图标的顶部)。我不想使用prefixIcon,因为当textField不在焦点模式下时,prefixIcon会隐藏。我需要我的前缀总是可见的。就像这些来自材料设计文本字段部分的图像:第一节第一节第一节第一节第一次

azpvetkf

azpvetkf1#

虽然存在一些固定位置值,
下面是我实现,

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();
  bool textEditHasFocus = false;
  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {
        textEditHasFocus = _focusNode.hasFocus;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      padding: new EdgeInsets.symmetric(
        vertical: 40.0,
        horizontal: 20,
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: <Widget>[
          Container(
            child: TextField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                // hintText: textEditHasFocus ? '' : 'Label',
                // hintStyle: TextStyle(
                //   color: Colors.grey,
                // ),
                border: OutlineInputBorder(),
                focusedBorder: OutlineInputBorder(),
                contentPadding: EdgeInsets.only(left: 40),
              ),
            ),
          ),
          AnimatedPositioned(
            duration: Duration(milliseconds: 200),
            left: textEditHasFocus ? 10 : 40,
            top: textEditHasFocus ? -10 : 13,
            child: InkWell(
              onTap: () {
                _focusNode.requestFocus();
              },
              child: Container(
                padding: EdgeInsets.only(left: 3),
                color: Colors.white,
                child: Text('Label'),
              ),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                padding: EdgeInsets.only(left: 10),
                color: Colors.transparent,
                child: Icon(Icons.favorite),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
ajsxfq5m

ajsxfq5m2#

您提供的material designs text fields part链接我尝试了相同的设计和您的需求,当您关注TextField时,labelText显示在prefixIcon上,我发现他们的很多解决方案都不正确
参考prefixIcon小部件文档here并查看给定示例
参考prefix小部件文档here
参考InputDecorationhere
当图标显示在TextField外部时,尝试以下代码

TextFormField(
                decoration: InputDecoration(
                  icon: Icon(
                    Icons.favorite,
                  ),
                  border: OutlineInputBorder(),
                  labelText: 'Brand Description',
                  hintText: 'Brand Description Here',
                ),
              ),

您的结果屏幕无焦点-〉x1c 0d1x
您的结果屏幕有焦点-〉

ipakzgxi

ipakzgxi3#

flutter 3+用户有一个简单的解决方案

InputDecorator(
      decoration: const InputDecoration(
          labelText: "Select Hospital",
          prefixIcon: Icon(Icons.ac_unit),
          contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
          border: OutlineInputBorder()),
      child:TextFormField(),
    );

相关问题