Flutter: Cột thẳng đứng ở giữa

Làm cách nào để căn giữa một cột theo chiều dọc trong Flutter? Tôi đã sử dụng widget "Trung tâm mới". Tôi đã sử dụng tiện ích con "Trung tâm mới", nhưng nó không căn giữa theo chiều dọc cột của tôi? Bất kỳ ý tưởng sẽ hữu ích ....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}

Giải pháp do Aziz đề xuất sẽ là:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children:children,
)

Nó sẽ không ở trung tâm chính xác vì có phần đệm:

padding: new EdgeInsets.all(25.0),

Để tạo chính xác Cột ở giữa - ít nhất là trong trường hợp này - bạn sẽ cần loại bỏ phần đệm.

Thử:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)

Với Cột, hãy sử dụng:

mainAxisAlignment: MainAxisAlignment.center

Nó sắp xếp (các) con của nó với tâm của Không gian mẹ theo chiều dọc

Bạn kiểm soát cách một hàng hoặc cột căn chỉnh con của nó bằng cách sử dụng các thuộc tính mainAxisAlignment và crossAxisAlignment. Đối với một hàng, trục chính chạy theo chiều ngang và trục chéo chạy theo chiều dọc. Đối với một cột, trục chính chạy theo chiều dọc và trục chéo chạy theo chiều ngang.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

Hãy thử cái này. Nó tập trung theo chiều dọc và chiều ngang.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

Giải pháp khác!

Nếu bạn muốn đặt các widget ở dạng dọc trung tâm, bạn có thể sử dụng ListView cho nó. ví dụ: tôi đã sử dụng ba nút và thêm chúng vào bên trong ListView, sau đó là

coWrap: true -> Với ListView này chỉ chiếm không gian cần thiết.

import 'package:flutter/material.dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Đầu ra:

Đối với tôi, vấn đề là có cột Đã mở rộng bên trong mà tôi phải xóa và nó hoạt động.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

Bạn đã có thể sử dụng. mainAxisAlignment:MainAxisAlignment.center Điều này sẽ thông qua các vật liệu trung tâm trong cột khôn ngoan. `crossAxisAlignment: CrossAxisAlignment.center 'Điều này sẽ căn chỉnh các mục ở trung tâm trong hàng một cách khôn ngoan.

Container( alignment:Alignment.center, Child: Column () )

Đơn giản chỉ cần sử dụng. Center ( Child: Column () ) hoặc rap với tiện ích Padding. Và điều chỉnh Padding sao cho các cột con nằm ở giữa.