responsive-design - 在 flutter 中将图像的中心与另一个图像的底部对齐

Question

目前我在用 Flutter 创建响应式设计时遇到了问题，因此它可以在 所有屏幕尺寸

的相同外观下正常工作

目前我需要像下图一样创建，我需要将图像的中心(下图中的红色)与另一张(蓝色大图)的底部对齐，有时红色是居中，但在不同的屏幕尺寸下，它要么稍微升高到顶部或底部。

这是我的尝试:

class ImageAssetUtils 
{
    static Image drawImage(String imagePath, double requiredWidth, double requiredHeight) 
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.8 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.21 : screenFactor;
        requiredWidth = requiredWidth * screenFactor;
        requiredHeight = requiredHeight * screenFactor;
        return new Image.asset(imagePath, width: requiredWidth, height: requiredHeight);
    }
}

class StyleUtils 
{
    static EdgeInsets givePadding(EdgeInsets absoluteEdges)
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.75 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.14 : screenFactor;

        double left = absoluteEdges.left * screenFactor;
        double right = absoluteEdges.right * screenFactor;
        double top = absoluteEdges.top * screenFactor;
        double bottom = absoluteEdges.bottom * screenFactor;

        return EdgeInsets.only(left: left, right: right, top: top, bottom: bottom);
    }
}  

class Test extends StatefulWidget 
{
    @override
    _TestState createState() => _TestState();
}

class _TestState extends State<Test> 
{
    @override
    Widget build(BuildContext context)
    {
        return new Scaffold(
            backgroundColor: Color.fromRGBO(235, 235, 235, 1.0),
            body: new Stack(children: <Widget>[
                new Image.asset('some Image.png',
                    fit: BoxFit.fill,
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * 0.33
                ),
                ListView(children: <Widget>[
                    new Padding(
                        padding: StyleUtils.givePadding(EdgeInsets.only(top: 16.0)),
                        child: new Center(
                            child: new Container(
                                child: ImageAssetUtils.drawImage("my image.png", 100.0, 100.0),
                            ),
                        )
                     )
                ]),
            ])
        );
    }
}

如果有任何帮助，将不胜感激，在此先感谢。

Answer 1

FractionalTranslation小部件用于操作子小部件的位置。您还必须通过 Offset到它，这将定义位置操作。子小部件将是红色矩形，Offset 将具有值 x: 0.0 和 y: 0.5。这会将红色矩形放置在其高度的一半以下。

现在您可以将红色矩形放在蓝色矩形上方。为此，您可以使用 Stack小部件。您必须设置 alignment: Alignment.bottomCenter，使红色矩形位于中心的下边缘。

您可以在下面找到一个代码示例。蓝色矩形的大小是屏幕的三分之一。红色矩形是蓝色矩形的一半。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(theme: ThemeData(), home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlueRedRects(
          big: MediaQuery.of(context).size.width / 3.0,
          small: MediaQuery.of(context).size.width / 6.0,
        ),
      ),
    );
  }
}

class BlueRedRects extends StatelessWidget {
  final double big;
  final double small;

  BlueRedRects({this.big, this.small});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        Container(color: Colors.blue, width: big, height: big),
        FractionalTranslation(
          translation: Offset(0.0, 0.5),
          child: Container(
            color: Colors.red,
            width: small,
            height: small,
          ),
        )
      ],
    );
  }
}