Выровнять центр изображения по основанию другого изображения в флаттере - PullRequest
Новая
       5

Выровнять центр изображения по основанию другого изображения в флаттере

0 голосов
/ 24 октября 2018

В настоящее время я сталкиваюсь с проблемой создания адаптивного дизайна во флаттере, чтобы он мог нормально работать с одинаковым внешним видом и ощущением для всех размеров экрана

В настоящее время мне нужно создать какНа изображении ниже, мне нужно, чтобы центр изображения (красный на изображении ниже) был выровнен с нижней частью другого (большое синее изображение), иногда красный находится по центру, но на разных размерах экрана он либо поднималнемного вверх или вниз.

enter image description here

Это моя попытка: 

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

Если это поможетбудет высоко ценится, спасибо заранее.

1 Ответ

0 голосов
/ 14 ноября 2018

Виджет FractionalTranslation используется для управления положением дочернего виджета.Вам также нужно будет передать ему Offset , который будет определять манипулирование позицией.Дочерний виджет будет красным прямоугольником, а Offset будет иметь значения x: 0.0 и y: 0.5.Это поместит красный прямоугольник ниже на половину его высоты.

Теперь вы можете положить красный прямоугольник над синим.Для этого вы можете использовать виджет Stack .Вам нужно установить alignment: Alignment.bottomCenter, чтобы красный прямоугольник располагался у нижнего края в центре.

Пример кода ниже.Синий прямоугольник имеет треть размера экрана.Красный прямоугольник в два раза больше синего.

example screen

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