В настоящее время я столкнулся с проблемой создания адаптивного дизайна во флаттере, чтобы он мог нормально работать с тем же внешним видом, что и все размеры экрана
В настоящее время мне нужно создать как на изображении ниже, мне нужно, чтобы центр изображения (красный на изображении ниже) был выровнен по нижнему краю другого (большое синее изображение), иногда красный центрируется, но в у разных размеров экрана он немного приподнят вверх или вниз.
Это моя попытка:
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),
),
)
)
]),
])
);
}
}
Если какая-либо помощь, она будет очень признательна, заранее спасибо.
Виджет Дробный перевод используется для управления положением дочернего виджета. Вам также необходимо передать ему Компенсировать, который будет определять манипуляции с положением. Дочерний виджет будет красным прямоугольником, а Offset
будет иметь значения x: 0.0
и y: 0.5
. Это поместит красный прямоугольник ниже на половину его высоты.
Теперь вы можете положить красный прямоугольник поверх синего. Для этого вы можете использовать виджет Куча. Вам нужно будет установить 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,
),
)
],
);
}
}