Flutter выравнивает текстовое поле снизу и текст сверху

Как выровнять текст сверху и текстовое поле снизу? Это сделано для создания интерфейса, похожего на чат.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,

          children: <Widget>[
            Text(
              'Hello, How are you?\nwow',
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
              //style: new TextStyle(fontWeight: FontWeight.bold),
            ),
            TextField(
              controller: myController,
              onChanged: (text) {
                //print("First text field: $text");
              },
              onSubmitted: (text) {
                print(text);
                //myController.clear();
                myController.text = "";
              },
              decoration: new InputDecoration(
                  hintText:"Enter your response."
              ),
              focusNode: _focusNode,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }

Вместо этого я попытался разделить текст и текстовые поля на контейнеры, но безрезультатно.

Есть ли способ сделать это во флаттере, аналогичном ограничениям макета iOS, где текстовое поле ограничено высотой клавиатуры, а текст ограничен текстовым полем?


flutter dart flutter-layout
person lws803    schedule 10.07.2018    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Вы можете вставить Expanded между Text и TextField в вашем Column. Это займет как можно больше места между ними и, таким образом, подтолкнет ваш Text вверх и TextField вниз:

Column(
  children: [
    Text(...),
    Expanded(child: Container()),
    TextField(...),
  ],
);
person creativecreatorormaybenot    schedule 10.07.2018
comment
вау, это сработало действительно хорошо! Хм, не возражайте, если я спрошу, есть ли способ расширить текстовое представление до полного размера тела, включая отступы? Прямо сейчас кажется, что это центр. Я уже установил выравнивание текста по левому краю - person lws803; 10.07.2018
comment
@Wilson Вам нужно будет удалить все ваши выравнивания, как и код в моем ответе. Вы выровняли его по центру с помощью CrossAxisAlignment.center. - person creativecreatorormaybenot; 10.07.2018
comment
Хм, похоже, мне, возможно, придется создать еще один контейнер для этого. Но теперь я не совсем уверен, как расширить контейнер до краев. - person lws803; 10.07.2018
comment
Это работает как чемпион, но, черт возьми, кажется глупым. :-( - person Rap; 15.01.2019