[英]How to align widget to another widget in Flutter?
I have a RaisedButton
widget inside of a Center
widget as one of the widgets in a Column
of widgets.我在Center
小部件内有一个RaisedButton
小部件,作为小部件Column
的小部件之一。 I want to add a CircularProgressIndicator
to the right side of this button and show it when the button is pressed.我想在此按钮的右侧添加一个CircularProgressIndicator
并在按下按钮时显示它。 Yet I want to leave the button centred when the progress bar is shown.但是我想在显示进度条时让按钮居中。 In other words I want the button always be in the center and the progress bar aligned to this button.换句话说,我希望按钮始终位于中心并且进度条与此按钮对齐。
I tried to use a Row
here but this pushes the button and it becomes not centred any more.我试图在这里使用Row
但这会按下按钮,它不再居中。
EDIT1: Looking at the result of the solution provided by @Anil Chauhan (thanks for the answer): EDIT1:查看@Anil Chauhan提供的解决方案的结果(感谢您的回答):
Like I said before that I tried to use Row like he did, the problem is that in this case the button is not in the centred in the screen and is pushed by the progress bar.就像我之前说的那样,我尝试像他一样使用 Row,问题是在这种情况下,按钮不在屏幕中央,而是由进度条推动。 And I need it to stay in the middle of it's row.我需要它留在它的行中间。
EDIT2: @Anil Chauhan edited answer now works for a specific case in which the button is predetermined size. EDIT2: @Anil Chauhan编辑的答案现在适用于按钮为预定大小的特定情况。 But if the size of the button is changed based on the language of the text (in apps that have several languages) this solution will not work.但是,如果按钮的大小根据文本的语言(在具有多种语言的应用程序中)而更改,则此解决方案将不起作用。
This is the reason the question I asked is: "How to align widget to another widget".这就是我问的问题的原因:“如何将小部件与另一个小部件对齐”。 Because if I could that I don't have to worry about the button text size any more.因为如果可以的话,我就不必再担心按钮文本大小了。
What would be the right way to handle this in Flutter?在 Flutter 中处理这个问题的正确方法是什么?
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
bool _showIndicator = false;
void _onButtonClicked() {
setState(() {
_showIndicator = !_showIndicator;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
const Expanded(child: SizedBox()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: RaisedButton(
child: Text("I am Too Big"),
onPressed: _onButtonClicked,
),
),
Expanded(
child: _showIndicator
? const Align(
alignment: Alignment.centerLeft,
child: CircularProgressIndicator(),
)
: const SizedBox(),
),
],
),
),
);
}
}
Here is my explanation:这是我的解释:
RaisedButton
size is depends on its child. RaisedButton
大小取决于它的孩子。 If you add it to Row
it will automatically align to left(or start).如果您将其添加到Row
,它将自动向左对齐(或开始)。Expanded
widget will fill the remaining space in Flex
widget( Row
& Column
are child classes of Flex
). Expanded
小部件将填充Flex
小部件中的剩余空间( Row
和Column
是Flex
子类)。 If you add more than one Expanded
widgets, it will split equally.如果您添加多个Expanded
小部件,它将平分。 So I added two Expanded
to both the side of button to make it center.所以我在按钮的两侧添加了两个Expanded
以使其居中。Expanded
Widget.现在我们应该为Expanded
Widget 赋予 child。
SizedBox
.对于第一个(左),我们没有任何东西可以显示,所以我添加了SizedBox
。CircularProgressIndicator
.对于第二个(右),我们需要CircularProgressIndicator
。 so I added it.所以我添加了它。Expanded
widget will try to make its child to fill the space inside of it. Expanded
小部件将尝试使其子部件填充其内部空间。 So the CircularProgressIndicator
will become Ellipse shaped.所以CircularProgressIndicator
将变成椭圆形。 We can avoid this by using Align
Widget.我们可以通过使用Align
Widget 来避免这种情况。Try this:尝试这个:
Updated:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyAppOne(),
);
}
}
class MyAppOne extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne>{
bool show = false;
@override
Widget build(BuildContext context){
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
child: RaisedButton(
onPressed: () {
setState(() {
show =!show;
});
},
child: Text('Show'),
),
),
Positioned(
right: MediaQuery.of(context).size.width * .20,
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10.0),
child: show ? CircularProgressIndicator() : Container(),
),
)
],
)
);
}
}
Flutter's Column and Row widgets have two convenient properties called mainAxisAlignment
and crossAxisAlignment
. Flutter 的 Column 和 Row 小部件有两个方便的属性,称为mainAxisAlignment
和crossAxisAlignment
。 I assume since you're using a Column and want the CircularProgressIndicator
to the right of the button, you might be want to use crossAxisAlignment
since the cross-axis of a Column is along the horizontal.我假设由于您使用的是 Column 并且希望CircularProgressIndicator
位于按钮的右侧,因此您可能想要使用crossAxisAlignment
因为 Column 的横轴沿水平方向。
If possible, please share your code for better understanding and support of the issue.如果可能,请分享您的代码,以便更好地理解和支持该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.