【问题标题】:Flutter TextField: How add icon in rightFlutter TextField:如何在右侧添加图标
【发布时间】:2021-03-14 20:54:23
【问题描述】:

在 TextField 小部件的 InputDecoration 部分中,只有左侧的图标可用(我的意思是在文本字段之外没有后缀)

如何在右侧 TextField 中添加图标?

使用 Row 是另一个问题:

 body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Text("Hi")
              ],
            ),
          ),
          Expanded(
              child: Row(
            children: [
              TextField(
                style: TextStyle(
                  backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                ),
                decoration: InputDecoration(
                  hintText: "Message",
                  filled: true,
                  fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ],
          )),
        ],
      ),

【问题讨论】:

    标签: flutter


    【解决方案1】:

    您可以创建自定义文本字段,如下代码:

    Container(
              child: Row(
            children: [Flexible(child: TextField()), Icon(Icons.add)],
          )),
    

    【讨论】:

    • 谢谢。我知道。但请参阅我的第 2 部分问题。我无法使用 Row。它给我错误
    【解决方案2】:

    为什么首先需要Expanded?但如果是必须的,我认为你可以这样做:

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Text("Hi")
              ],
            ),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width - 50,
                  height: 35,
                  child: TextField(
                    style: TextStyle(
                      backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                    ),
                    decoration: InputDecoration(
                      hintText: "Message",
                      filled: true,
                      fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(15),
                      ),
                    ),
                  ),
                ),
                Icon(Icons.add_a_photo, size: 25)
              ],
            )
          ),
        ],
      ),
    );
    

    您的代码出错,因为 Textfield 需要大小。

    【讨论】:

    • 但是现在TextField 的大小是有限的,这不利于响应式设计。而且在不同的设备上看起来可能会有所不同。
    【解决方案3】:

    这样做:

    Row(
      children: [
        Flexible(
          child: TextField(
            style: TextStyle(
              backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
            ),
            decoration: InputDecoration(
              hintText: "Message",
              filled: true,
              fillColor: Color.fromRGBO(235, 235, 245, 0.6),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ),
        ),
        SizedBox(width: 10.0),
        Icon(Icons.settings),
      ],
    ),
    

    需要用Flexible 小部件限制TextFieldFlexible 代表 TextField,就像 MainAxisSize.min 代表 Column

    【讨论】:

    • 它对我不起作用。bcs 我在列中使用 Expandad
    • 它之所以有效,是因为它使用文本字段和图标创建行。 Yoy 只需 tweek 代码即可使用 Expanded/Flexible。
    • @nimanima ,我已经修复了代码。现在工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-16
    • 1970-01-01
    • 2020-05-25
    相关资源
    最近更新 更多