flutter - 在屏幕中央对齐文本

Question

我试图在“列”中使用“扩展”小部件，以便用户可以在屏幕的任何位置点击以增加计数器，但是在crossAxisAlignment和mainAxisAlignment的列中的文本对齐存在问题，它不适用于“扩展”小部件，如下所示

return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.black12,
    body: SafeArea(
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             Expanded(
               child: GestureDetector(
                  onTap: () {
                    setState(() {
                      i++;
                      print(i);
                    });
                  },
                  child: Text(
                    i.toString(),
                    style: TextStyle(fontSize: 50.0, color: Colors.blueAccent),
                    textAlign: TextAlign.center,
                  ),
                ),
             ),

          ],
        ),
      ),
    ),
  ),
);

Answer 1

您使用了错误的方法，因为您无法将扩展项居中，因为扩展项占用了案例列中行或列内的全部可用空间，而在其GestureDetector子级中包含单个Widget。这是您想要实现的解决方案之一

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black12,
      body: SafeArea(
        child: Center(
          child: Stack(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        setState(() => i++;);
                      },
                    ),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.center,
                child: Text(
                  '$i',
                  style: TextStyle(fontSize: 50.0, color: Colors.blueAccent),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }