Flutter中圆形进度指示器未居中

Question

我正在将登录功能集成到我的应用程序中，在请求正在进行时，应该出现一个圆形进度指示器。但是我不知道为什么progressBar总是出现在顶部而不是中心位置。请帮忙解决。

FadeAnimation(
        1.8,
        Center(
            child: Container(
          height: double.infinity,
          child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            padding: EdgeInsets.symmetric(
              horizontal: 40.0,
              vertical: 120.0,

            ),
            child: _isLoading
                ? Center(child: CircularProgressIndicator())
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Sign In',
                        style: TextStyle(
                          color: Colors.white,
                          fontFamily: 'OpenSans',
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 30.0),
                      _buildEmailTF(),
                      SizedBox(
                        height: 30.0,
                      ),
                      _buildPasswordTF(),
                      _buildForgotPasswordBtn(),
                      _buildRememberMeCheckbox(),
                      _buildLoginBtn(),
                      _buildSignInWithText(),
                      _buildSocialBtnRow(),
                      _buildSignupBtn(),
                    ],
                  ),
          ),
        )),
      )

- bensofter

Answer 1

我通过使用SizedBox小部件将其包装，并将屏幕的高度分成几段来解决了这个问题，从而使圆形指示器居中。

return SizedBox(
       height: MediaQuery.of(context).size.height / 1.3,
       child: Center(
           child: CircularProgressIndicator(),
            ),
        );

- Emarco

---

你是怎么得出1.3的？ - terminatorash2199

Answer 2

因为SingleChildScrollView的高度取决于vertical: 120.0而不是container(height: double.infinity)的值，该值意味着容器的高度与其父容器一样大。

而MediaQuery.of(context).size.height这部分的意思是“与屏幕一样大”，你可以使用MediaQuery.of(context).size.height/2来调整容器的高度。

尝试一下：

FadeAnimation(
    1.8,
    Center(
        child: _isLoading
            ? Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(child: CircularProgressIndicator()))
            :Container(
              height: double.infinity,
              child: SingleChildScrollView(
                physics: AlwaysScrollableScrollPhysics(),
                padding: EdgeInsets.symmetric(
                  horizontal: 40.0,
                  vertical: 120.0,

            ),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Sign In',
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'OpenSans',
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 30.0),
                  _buildEmailTF(),
                  SizedBox(
                    height: 30.0,
                  ),
                  _buildPasswordTF(),
                  _buildForgotPasswordBtn(),
                  _buildRememberMeCheckbox(),
                  _buildLoginBtn(),
                  _buildSignInWithText(),
                  _buildSocialBtnRow(),
                  _buildSignupBtn(),
                ],
              ),
      ),
    )),
  )

- Đặng Nam

Answer 3

将你的 `SingleChildScrollView` 包裹在一个 `Center` 中。

- aabiro

Answer 4

居中( heightFactor: 12, child: CircularProgressIndicator(), ),

- Abdallah Mohamed