如何在屏幕的中心顶部对齐图像行

Question

我一直在尝试在屏幕顶部中心对齐一些图像，就像你想要标题一样，但我不知道该怎么做。我为背景设置了一些图像和颜色，然后我创建了一些墨水池小部件（不确定是否需要），将我的图像附加在那里并将它们排成一排。 如何将该行放置在屏幕的顶部中心，以使 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),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 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),
                      ),
                    ),
                  ),
                ],
              ),
            ),

Answer 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
              ],
            ),
          ),
        ), 
      ),
    );
  }
}