Flutter 垂直居中文本并与图像右对齐
我正在为我的新Flitter应用程序开发一个SplashScreen 下面是它的屏幕截图: 这里是当前脚手架的代码:Flutter 垂直居中文本并与图像右对齐,flutter,Flutter,我正在为我的新Flitter应用程序开发一个SplashScreen 下面是它的屏幕截图: 这里是当前脚手架的代码: return Scaffold( body: Stack( alignment: Alignment.bottomCenter, children: [ Container( decoration: BoxDecoration( image: Decoration
return Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/splash/${yourList[randomIndex]}"),
fit: BoxFit.cover,
),
),
// child: [Your content here],
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
decoration: new BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.5),
image: DecorationImage(
image: new AssetImage('assets/images/app_icon_trans.png'),
),
),
child: Text(
"© 2020 Mov-Map version: ${_projectVersion}",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 16.0),
))
],
),
);
我想更改第二个容器的布局。我想把图像放在左边,文本放在图像后面,垂直地放在图像的中心
我已经寻找了几个小时的解决方案,非常感谢您的建议。您希望这样吗?使用一行(我没有您的资产图像,所以我使用了一个蓝色容器) 复制/粘贴此代码以使用它:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
decoration:
new BoxDecoration(color: const Color(0xFFFFFFFF).withOpacity(0.5)),
child: Row(children: [
Container(
width: 40,
height: 40,
color: Colors.blue,
),
Text(
"© 2020 Mov-Map version: 1",
style: TextStyle(
color: Colors.red, fontWeight: FontWeight.bold, fontSize: 16.0),
),
]));
}
}
如果需要,还可以使用crossAxisAlignment
和/或mainAxisAlignment
更改行的对齐方式