[英]Flutter positioning widgets in Column
我正在尝试通过将图像和文本包装在 Column 小部件中并将其放置在 Center 小部件中,将图像设置在 Column 的中心,并将 Text 设置在图像的底部。
不幸的是,它使 Column 居中并使 Image 位于屏幕中心上方。
我该如何解决?
我当前的代码:
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Theme.of(context).primaryColor),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(ImagePaths.newLogoLogin),
Text(Strings.beALocal)
],
),
),
);
}
这可以使用Expanded
小部件来实现:
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Theme.of(context).primaryColor),
child: Column(
children: [
Spacer(),
Image.asset(ImagePaths.newLogoLogin),
Expanded(
Column(
children: [ Text(Strings.beALocal) ],
mainAxisAlignment: MainAxisAlignment.start
)
)
],
),
);
}
您可以在其中使用带有Positioned
Text
小部件的Stack
。
完整示例:
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Test")),
body: Stack(children: [Placeholder(), Test()]),
),
);
}
}
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Container(
width: 150,
height: 150,
color: Colors.blue,
),
Positioned(child: Text("Some text"), bottom: -25),
],
),
);
}
}
你可以使用小部件 SafaArea 或计算 appbar 和导航栏的大小,当你有这个结果时,使用它来删除屏幕的高度大小,之后你可以添加列 MainAxisAlignment.center、CrossAxisAlignment.center 并在 Column 中添加其他小部件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.