Question

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

下，在相同的外观和感觉下都可以正常工作

当前，我需要像下面的图像一样进行创建，我需要将图像的中心（下图中的红色图像）与另一幅图像（蓝色的大图像）的底部对齐，有时红色的图像是居中，但屏幕尺寸不同，它要么向上或向下抬起一点。

这是我的尝试：

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

在颤动中将图像的中心与另一图像的底部对齐

1 个答案: