如何在屏幕的中心顶部对齐图像行
Posted
技术标签:
【中文标题】如何在屏幕的中心顶部对齐图像行【英文标题】：How to align row of images at the center top of the screen 【发布时间】：2021-08-13 02:07:58 【问题描述】：我一直在尝试在屏幕顶部中心对齐一些图像，就像你想要标题一样，但我不知道该怎么做。我为背景设置了一些图像和颜色，然后我创建了一些墨水池小部件（不确定是否需要），将我的图像附加在那里并将它们排成一排。 如何将该行放置在屏幕的顶部中心，以使 4 个图像在顶部完美对齐？
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RelationshipPrefences extends StatelessWidget
const RelationshipPrefences(Key? key) : super(key: key);
@override
Widget build(BuildContext context)
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/topbig.png"),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topCenter,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
],
),
],
),
),
);
【问题讨论】：
【参考方案1】：您可以使用Positioned 小部件并用它包装您的Row 小部件。那你可以给top: 0.0
Positioned(
top: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
InkWell(
onTap: () ,
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/purplewatch.png',
width: 50.0, height: 50.0),
),
),
),
],
),
),
【讨论】：
谢谢你们，我最终使用了 Shrijans 的答案，因为我想在行中的每个图像之间划一条线，但我也尝试过你的答案 Tryharder，如果我只是想要它就可以完成工作图片【参考方案2】：这是一个包含 Column 的小部件树，其中包含 Row 和 Images。在这种情况下，Expanded 小部件将使Image 变得尽可能大，从而允许Row 中的所有小部件具有相同的大小。您可以将此代码复制粘贴到您的 IDE 中，它应该可以正常工作。
import 'package:flutter/material.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
@override
Widget build(BuildContext context)
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
child: Container(
width: size.width,
height: size.height,
child: SingleChildScrollView(
child: Column(
children: [
Row(
children: [
// Expanded(
// child: Image.network('https://picsum.photos/250?image=9'),
// ),
Expanded(
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png'),
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png'),
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png'),
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/bluetick.png'),
),
),
),
],
),
// the rest of your widget below the image you align
// Widget here etc
],
),
),
),
),
);
【讨论】：
以上是关于如何在屏幕的中心顶部对齐图像行的主要内容，如果未能解决你的问题，请参考以下文章