텍스트 양식 필드의 변동 문제, 입력의 중심이 맞지 않음

텍스트 양식 필드의 변동 문제, 입력의 중심이 맞지 않음

멀티라인 채팅 입력에 문제가 있습니다. 사용자가 대화를 입력할 때, 입력은 컨테이너 중앙에 있어야 합니다. 하지만 그렇지 않고 패딩으로 고칠 수가 없어요.

다음은 내가 받는 것의 스크린샷이다:

대신 내가 받아야 할 것:

코드는 다음과 같습니다:

Container(
            width: screenWidth - 130.0,
            height: 30.0,
            padding: EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
            decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(15.0)),
            child: new ConstrainedBox(
              constraints: BoxConstraints(maxHeight: 300.0),
              child: ScrollConfiguration(
                behavior: DisableScrollGlow(),
                child: new Scrollbar(
                  child: new SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    reverse: true,
                    child: Center(
                      child: new TextField(
                        keyboardType: TextInputType.text,
                        autofocus: true,
                        maxLines: null,
                        controller: _messageController,
                        decoration: InputDecoration(
                            contentPadding:
                            EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
                            enabledBorder: InputBorder.none,
                            errorBorder: InputBorder.none,
                            disabledBorder: InputBorder.none,
                            border: InputBorder.none,
                            focusedBorder: InputBorder.none),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

모든 도움을 환영합니다

---

다음과 같이 textAlign을 TextAlign.center로 설정합니다:

TextField(
  keyboardType: TextInputType.text,
  autofocus: true,
  maxLines: null,
  controller: controller,
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    contentPadding:
    EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
    enabledBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    disabledBorder: InputBorder.none,
    border: InputBorder.none,
    focusedBorder: InputBorder.none),
),

---

텍스트 필드 장식에서 true와 동일한 조밀도 유지

isDense : true 

내용 패딩에서 추가

contentPadding: EdgeInsets.only(left: 0, bottom: 5, top: 0.0, right: 0),

---

안녕하세요, 조안 선생님,

왜 당신이 선택한 위젯에 텍스트 필드를 만드는지는 잘 모르겠습니다만, 제가 당신의 코드를 개선하려고 시도했을 때 입력이 여러 줄로 변경될 때 문제가 있었습니다. 그래서 네가 사용한 위젯 없이 텍스트 필드를 코딩하는 거야. 이 코드를 사용하면 텍스트의 중심이 잘 잡히고 여러 줄에 문제가 없습니다.

import 'package:flutter/material.dart';

class TempTest extends StatefulWidget {
  @override
  _TempTestState createState() => _TempTestState();
}

class _TempTestState extends State<TempTest> {
  TextEditingController _messageController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Center(
          child: ListTile(
            leading: IconButton(
                icon: Icon(Icons.image), onPressed: () => print('add photo')),
            trailing: IconButton(
                icon: Icon(Icons.send), onPressed: () => print('send text')),
            title: TextField(
              keyboardType: TextInputType.text,
              autofocus: true,
              maxLines: null,
              controller: _messageController,
              decoration: InputDecoration(
                isDense: true,
                contentPadding:
                    EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(width: 0, style: BorderStyle.none),
                ),
                filled: true,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

(고밀도 속성 제외)

갱신하다

내부의 단어 패딩을 최소화하려면 에서 속성을 시도하고 를 0으로 설정합니다. 주로 알렉스 콜렛이 그의 대답에서 썼던 것처럼.

이렇게 해야 돼요

다음과 같은 코드로

import 'package:flutter/material.dart';

class SmallInputField extends StatefulWidget {
  @override
  _SmallInputFieldState createState() => _SmallInputFieldState();
}

class _SmallInputFieldState extends State<SmallInputField> {
  TextEditingController _messageController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Material(
              elevation: 5.0,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(1.0),
                topRight: Radius.circular(10.0),
                bottomLeft: Radius.circular(10.0),
                bottomRight: Radius.circular(10.0),
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(
                    vertical: 10.0, horizontal: 20.0),
                child: Text('anger',
                    style: TextStyle(fontSize: 20.0, color: Colors.black87)),
              ),
            ),
            ListTile(
              dense: true,
              contentPadding: EdgeInsets.all(0),
              leading: IconButton(
                  constraints: BoxConstraints(maxHeight: 24),
                  padding: EdgeInsets.all(0),
                  icon: Icon(Icons.image),
                  onPressed: () => print('add photo')),
              trailing: IconButton(
                  constraints: BoxConstraints(maxHeight: 24),
                  padding: EdgeInsets.all(0),
                  icon: Icon(Icons.send),
                  onPressed: () => print('send text')),
              title: TextField(
                style: TextStyle(fontSize: 24),
                keyboardType: TextInputType.text,
                autofocus: true,
                maxLines: null,
                controller: _messageController,
                decoration: InputDecoration(
                  isDense: true,
                  labelStyle: TextStyle(fontSize: 20),
                  contentPadding:
                      EdgeInsets.only(left: 10, bottom: 0, top: 0.0, right: 0),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide(width: 0, style: BorderStyle.none),
                  ),
                  filled: true,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

저도 비슷한 문제가 있어서 위의 해결책들을 시도해봤지만 아무도 도움이 되지 않았습니다. 제 주치의는 괜찮아요.

SizedBox(
                width: screenWidth * 0.75,
                child: TextFormField(
                  maxLength: null,
                  textAlign: TextAlign.center,
                  keyboardType: TextInputType.phone,
                  onChanged: (value) {
                    setState(() {
                      phoneController.text = value;
                    });
                  },
                  controller: phoneController,
                  style: const TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                  decoration: InputDecoration(
                    hintText: 'Phone number ',
                    hintStyle:
                        const TextStyle(fontSize: 18, color: Colors.grey),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                    suffixIcon: phoneController.text.length > 9
                        ? const Icon(
                            Icons.done_outline,
                            color: Colors.green,
                            size: 25,
                          )
                        : null,
                  ),
                ),
              ),

도와드릴까요?