Làm cách nào để căn giữa văn bản theo chiều dọc và chiều ngang trong Flutter?

Tôi muốn biết cách căn giữa nội dung của tiện ích Văn bản theo chiều dọc và chiều ngang trong Flutter. Tôi chỉ biết cách căn giữa tiện ích con bằng cách sử dụng Center(child: Text("test"))chứ không sử dụng chính nội dung, nó được căn trái theo mặc định. Trong Android, tôi tin rằng thuộc tính của TextView đạt được điều này được gọi là gravity.

Ví dụ về những gì tôi muốn:

Chỉ đặt thuộc tính căn chỉnh theo chiều ngang của văn bản.

Tôi đã sử dụng mã bên dưới để đặt văn bản ở giữa theo chiều dọc và chiều ngang.

Mã:

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

Bạn có thể sử dụng TextAlignthuộc tính của hàm Texttạo.

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

Tôi nghĩ rằng một lựa chọn linh hoạt hơn sẽ được quấn Text()với Align()như vậy:

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

Sử dụng Center()dường như bỏ qua TextAlignhoàn toàn trên tiện ích Văn bản. Nó sẽ không căn chỉnh TextAlign.lefthoặc TextAlign.rightnếu bạn cố gắng, nó sẽ vẫn ở giữa.

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

Điều này tạo ra kết quả tốt nhất cho tôi.

Phần tử văn bản bên trong Center of SizedBox hoạt động theo cách tốt hơn nhiều, bên dưới Mã mẫu

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
);
}

Thích viết mã 👨‍💻

Đặt văn bản vào trung tâm:

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

Nếu bạn là người dùng intellij IDE, bạn có thể sử dụng phím tắt Alt+Enter, sau đó chọn Wrap with Centervà sau đó thêmtextAlign: TextAlign.center

Tổng quan: Tôi đã sử dụng tiện ích Flex để căn giữa văn bản trên trang của mình bằng cách sử dụng trung tâm MainAxisAlignment. dọc theo trục hoành. Tôi sử dụng vùng đệm vùng chứa để tạo khoảng trống lề xung quanh văn bản của mình.

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