Выровнять текст подсказки в многострочном текстовом поле во Flutter - PullRequest
Новая
       49

Выровнять текст подсказки в многострочном текстовом поле во Flutter

2 голосов
/ 05 августа 2020

У меня есть многострочное текстовое поле с prefixIcon, поэтому теперь значок находится в центре по вертикали, а текст подсказки находится в верхнем левом углу. Я хочу, чтобы они оба были выровнены либо вверху, либо по центру по вертикали.

Используемый код: 

    Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: TextField(
            maxLines: 3,
            decoration: InputDecoration(
              hintText: 'Bio',
              prefixIcon: Icon(Icons.chrome_reader_mode),
              fillColor: Colors.grey[200],
              filled: true,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(),
              ),
            ),
          ),
        ),

Ответы [ 2 ]

3 голосов
/ 05 августа 2020

Уродливое решение, но оно работает. Другие решения (например, установка textAlignVertical на TextAlignVertical.center) не работают, поскольку maxLines не является нулевым .

Добавьте TextStyle к hintText и установите height из TextStyle на 2.8. Вам нужно уменьшить это значение, когда fontSize больше, потому что height будет умножено на fontSize, чтобы получить высоту строки. Я добавил contentPadding, чтобы текст не переполнялся (потому что теперь текст начинается с центра TextField). 

TextField(
                    maxLines: 3,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(vertical: 30),
                      hintText: 'Bio',
                      hintStyle: TextStyle(
                        height: 2.8,
                      ),
                      prefixIcon: Icon(Icons.chrome_reader_mode),
                      fillColor: Colors.grey[200],
                      filled: true,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(),
                      ),
                    ),
                  ),

Результат:

res

0 голосов
/ 06 августа 2020

Хотя в вашем конкретном случае проблема может быть решена путем добавления символа новой строки (hintText: '\nBio'), лучшим решением является использование свойства labelText вместо hintText. По умолчанию метка выравнивается по центру TextField. 

      TextField(
        maxLines: 3,
        decoration: InputDecoration(
          labelText: 'Bio',
          prefixIcon: Icon(Icons.chrome_reader_mode),
          fillColor: Colors.grey[200],
          filled: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: BorderSide(),
          ),
        ),
      ),
...