Flutter-如何垂直對齊容器內的文本輸入？

我正在嘗試將搜索輸入控制元件添加到我的 Flutter Web 應用程式的應用程式標題中。

看...

Widget _buildSearchControl() {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      padding: EdgeInsets.only(right: 20),
      margin: EdgeInsets.all(10),
      width: 300,
      child: TextField(
        style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
        decoration: InputDecoration(
            prefixIcon: const Icon(Icons.search,color: Colors.black,),
            suffixIcon: IconButton(
              icon: const Icon(Icons.clear,color: Colors.black,),
              onPressed: () {
                /* Clear the search field */
              },
            ),
            hintText: 'Search...',
            border: InputBorder.none),
      ),
    );
  }

但是，當輸入文本時，字符沒有像我期望的那樣垂直居中對齊

有沒有辦法讓輸入到 TextField 控制元件的字符垂直居中，以便它們與圖示對齊？

uj5u.com熱心網友回復：

你試過這個 textAlignVertical 屬性嗎？

TextField(
 textAlignVertical: TextAlignVertical.center,
 ....
),

uj5u.com熱心網友回復：

我用Padding包裹容器。

并添加contentPadding: const EdgeInsets.all(5),到InputDecoration

...
Padding(
  padding: const EdgeInsets.all(8.0).copyWith(bottom: 0),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Theme.of(context).primaryColor, width: 2),
      borderRadius: const BorderRadius.all(Radius.circular(10)),
      color: Colors.white
    ),
    child: TextFormField(
      controller: _controller,
      onChanged: (string) {},
      style: TextStyle(color: Theme.of(context).primaryColor),
      cursorColor: Theme.of(context).primaryColor,
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(5),
        enabledBorder: InputBorder.none,
        focusedBorder: InputBorder.none,
        labelText: 'Enter',
        labelStyle: TextStyle(
            color: Theme.of(context).primaryColor,
            fontSize: 16,
            fontWeight: FontWeight.w500),
        prefixIcon: Icon(
          Icons.document_scanner_sharp,
          color: Theme.of(context).primaryColor,
        ),
        suffixIcon: Padding(
          padding: const EdgeInsets.only(top: 5.0),
          child: IconButton(
            alignment: Alignment.topLeft,
            icon: const Icon(
              Icons.clear,
              size: 25,
              color: Colors.red,
            ),
            tooltip: 'Clear',
            onPressed: () {
              FocusScope.of(context).unfocus();
              _controller.clear();
            }
          ),
        )
      )
    ),
  ),
),

uj5u.com熱心網友回復：

使用這個，也許這取決于你的 contentPadding

Container(
      width: 300,
      height: 56,
      margin: EdgeInsets.fromLTRB(0, 0, 0, 20),
      child: TextFormField(
        key: widget.globalKey,
        autocorrect: false,
        onTap: widget.onClick,
        minLines: widget.minLines,
        maxLines: widget.maxLines,
        textInputAction: TextInputAction.done,
        onChanged: (val) => widget.onChangeValue(val),
        style: getInputStyle,
        initialValue: widget.initialValue,
        textAlign: TextAlign.left,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        controller: widget.controller,
        keyboardAppearance: Brightness.dark,
        decoration: InputDecoration(
          contentPadding: REdgeInsets.fromLTRB(
              14, 16, 0, 16),
          labelText: widget.labelText,
          hintText: widget.hintText,
          floatingLabelBehavior: FloatingLabelBehavior.auto,
          labelStyle: getLabelStyle,
          hintStyle: getLabelStyle,
          fillColor: widget.backGroundColor ,
          filled: true,
          prefix: widget.prefix, 
        ),
      ),
    )

標籤：扑扑网

上一篇：撲。文本溢位

下一篇：如何在不使用回圈的情況下檢查字串中兩個單詞的出現次數是否相等？