Блог

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

Мой код

   TextFormField(
    maxLines: 3,
    decoration: new InputDecoration(
      labelText: "Description",
      labelStyle: TextStyle(
          color: textGreyColor,
          fontFamily: 'SegoeUI'),
      fillColor: Colors.white,
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
            color: kPrimaryColor, width: 1.0),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
            color: Color(0xffE6E6E6), width: 1.0),
      ),

      border: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(10),
        borderSide: new BorderSide(
            color: Color(0xffE6E6E6)),
      ),
      //fillColor: Colors.green
    ),
    keyboardType: TextInputType.emailAddress,
    style: new TextStyle(
        fontFamily: "SegoeUI",
        color: kPrimaryColor),
  )
 

Я обнаружил, что с этим можно справиться, предоставив height on labelStyle: . Но если мы не будем управлять государством, возникнет проблема с пользовательским интерфейсом. Существует множество способов управления этим состоянием, для простоты onTap метод from TextFormFiled просто идеален.

Давайте создадим bool внутреннее состояние. onTap измените его на false если наш TextFormField is focused предоставляет высоту на основе размера шрифта, в противном случае сделайте ее равной 0. Но это не сработает, если мы будем в порядке, пока текстовый файл пуст, метка будет в центре.

Если мы будем использовать FocusScope , и TextEditingController это будет идеально

  FocusScope(
              onFocusChange: (value) {
                setState(() {
                  if (value)
                    _isFocused = value;
                  else {
                    if (controller.text.isEmpty) _isFocused = false;
                  }
                });
              },
 

Решение 1: Идеально

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isFocused = false;

  final TextEditingController controller = TextEditingController();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FocusScope(
              onFocusChange: (value) {
                setState(() {
                  if (value)
                    _isFocused = value;
                  else {
                    if (controller.text.isEmpty) _isFocused = false;
                  }
                });
              },
              child: TextFormField(
                controller: controller,
                maxLines: 3,
                decoration: new InputDecoration(
                  labelText: "Description",
                  filled: true,
                  labelStyle: TextStyle(
                    height: _isFocused ? 0 : 8,
                    color: Colors.grey,
                    fontSize: 14,
                    // fontFamily: 'SegoeUI',
                  ),
                  fillColor: Colors.white,

                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey, width: 1.0),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderSide:
                        BorderSide(color: Color(0xffE6E6E6), width: 1.0),
                  ),

                  border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(10),
                    borderSide: new BorderSide(color: Color(0xffE6E6E6)),
                  ),
                  //fillColor: Colors.green
                ),
                keyboardType: TextInputType.emailAddress,
                style: new TextStyle(
                  fontFamily: "SegoeUI",
                  color: Colors.grey,
                ),
              ),
            ),
            TextField()
          ],
        ),
      ),
    ));
  }
}

 

Решение 2: Выравнивание надписи только в первый раз

 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isFocused = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              maxLines: 3,
              onTap: () {
                setState(() {
                  _isFocused = true;
                });
              },
              decoration: new InputDecoration(
                labelText: "Description",
                filled: true,
                labelStyle: TextStyle(
                  height: _isFocused ? 0 : 8,
                  color: Colors.grey,
                  fontSize: 14,
                  // fontFamily: 'SegoeUI',
                ),
                fillColor: Colors.white,

                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey, width: 1.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0xffE6E6E6), width: 1.0),
                ),

                border: new OutlineInputBorder(
                  borderRadius: new BorderRadius.circular(10),
                  borderSide: new BorderSide(color: Color(0xffE6E6E6)),
                ),
                //fillColor: Colors.green
              ),
              keyboardType: TextInputType.emailAddress,
              style: new TextStyle(
                fontFamily: "SegoeUI",
                color: Colors.grey,
              ),
            ),
            TextField()
          ],
        ),
      ),
    ));
  }
}

 

HintText Вместо Этого Используйте a. Это работает идеально.