개발하자

플러터에서 텍스트를 수직 및 수평으로 중앙에 배치하려면 어떻게 해야 합니까?

Cuire 2023. 3. 8. 08:06
반응형

플러터에서 텍스트를 수직 및 수평으로 중앙에 배치하려면 어떻게 해야 합니까?

텍스트 위젯의 내용을 플러터에서 수직 및 수평으로 중앙에 배치하는 방법을 알고 싶습니다. 나는 위젯 자체를 중앙에 배치하는 방법만 알고 내용 자체는 알지 못합니다. 기본적으로 왼쪽으로 정렬됩니다. Android에서는 이를 달성하는 TextView의 속성을 이라고 합니다.

내가 원하는 것의 예:

centered text example



생성자 속성을 사용할 수 있습니다.

Text("text", textAlign: TextAlign.center,)


텍스트 정렬 중심 특성 설정은 수평 정렬만 합니다.

enter image description here

나는 아래 코드를 사용하여 텍스트를 세로로, 가로로 가운데로 설정했다.

enter image description here

코드:

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),


보다 유연한 옵션은 다음과 같이 포장하는 것이라고 생각합니다:

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

를 사용하면 텍스트 위젯에서 완전히 무시되는 것 같습니다. 정렬되지 않거나 시도해도 가운데에 남아 있습니다.



SizeBox 센터 내의 텍스트 요소는 샘플 코드 아래에서 훨씬 더 잘 작동합니다

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

코딩하기 👨💻



텍스트를 가운데에 놓으십시오:

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );



                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

이것은 나에게 최고의 결과를 가져왔다.



Intellij IDE 사용자인 경우 바로 가기 키를 사용한 다음 선택하고 추가할 수 있습니다



개요: Flex 위젯을 사용하여 가로축을 따라 MainAxisAlignment.center를 사용하여 내 페이지의 텍스트를 중앙에 배치했습니다. 컨테이너 패딩을 사용하여 텍스트 주변에 여백을 만듭니다.

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])


아마도 당신은 2개의 컨테이너에 동일한 폭과 높이를 제공하기를 원할 것입니다

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),


textAlign.center를 설정하려면 텍스트 위젯 속성을 설정해야 합니다.

center(
   child : Text(
  'Hello',
   textAlign: TextAlign.center))


정렬 위젯 내부에서 텍스트 위젯을 정리하고 정렬.center를 추가합니다.

Align(
  alignment: Alignment.center,
  child: Text(
    'Some Text',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  ),
)


텍스트 위젯에서 속성을 사용해야 합니다. 그것은 나에게 최고의 결과를 가져왔다

Text(
  'Hi there',
   textAlign: TextAlign.center,                          
 )


텍스트 제목은 항상 맨 위에 있어야 합니다.

잘못된 방법:

  child: Center(
    child: Text(
      textAlign: TextAlign.center,
      "Hello World",
    ),
  ),

올바른 방법:

  child: Center(
    child: Text(
      "Hello World",
      textAlign: TextAlign.center,
    ),
  ),

반응형