英文:
Circular Progress Indicator not being centered Flutter
问题
我正在集成登录功能到我的应用程序中，在这个过程中，当发出请求时，应该出现一个圆形进度指示器。我不知道为什么 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(),
],
),
),
)),
)
英文:
I am integrating login in my app in which a circular progress indicator should appear while a request is being made. I don't know why the progressBar keeps appearing at the top instead of the center. Please help.
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(),
],
),
),
)),
)
答案1
得分: 19
我通过使用SizedBox小部件将其包装起来，并将屏幕高度分为1.3，从而使圆形指示器居中。
return SizedBox(
height: MediaQuery.of(context).size.height / 1.3,
child: Center(
child: CircularProgressIndicator(),
),
);
英文:
I solved this by wrapping it with SizedBox widget and divide the height of the screen which centered the circular indicator.
return SizedBox(
height: MediaQuery.of(context).size.height / 1.3,
child: Center(
child: CircularProgressIndicator(),
),
);
答案2
得分: 7
由于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(),
],
),
),
),
),
)
英文:
It because the height of SingleChildScrollView depend on vertical: 120.0
instead of the value container( height: double.infinity ) which mean the height of container is as big as it's parent.
The part:MediaQuery.of(context).size.height mean "as big as screen"
you can use MediaQuery.of(context).size.height/2 instead to resize container's height
try this:
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(),
],
),
),
)),
)
答案3
得分: 0
Center(
heightFactor: 12,
child: CircularProgressIndicator(),
),
英文:
Center(
heightFactor: 12,
child: CircularProgressIndicator(),
),
答案4
得分: 0
将您的 SingleChildScrollView 包裹在一个 Center 中。
英文:
Wrap your SingleChildScrollView in a Center
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论