堆栈元素颤动中的相对定位，不同方向（纵向/横向）没有变化

Question

如何使 Stack 元素在从纵向旋转到横向时不发生变化？ 我已经添加了图像和我的堆栈代码，不知道我在做什么错任何人都可以帮助我。

我已经尝试根据方向更改设计但没有运气我认为在搜索时必须有一种简单的方法我遇到这个“Positioned.fromRect()”但不知道如何使用它或它的作用.

提前谢谢你。

portrait Image

Landscape Image

displayHeight(context) 和 displayWidth(context) 从上述函数中获取值。

double displayHeight(BuildContext context) {
  debugPrint('Height = ' +
      (MediaQuery.of(context).size.height - kToolbarHeight).toString());
  return displaySize(context).height - kToolbarHeight;
}

double displayWidth(BuildContext context) {
  debugPrint('Width = ' + MediaQuery.of(context).size.width.toString());
  return displaySize(context).width;
}


    Stack(
            alignment: AlignmentDirectional.topCenter,
            children: <Widget>[
          Positioned(
                child: Image.asset(
                  'images/header.png',
                  height: displayHeight(context) * 0.38,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
              Positioned(
                top: displayHeight(context) * 0.02,
                width: displayWidth(context),
                child: Container(
                  child: Text(
                    "Want to promote good health? you are in a right place.",
                    textAlign: TextAlign.center,
                    softWrap: true,
                    style: TextStyle(
                        fontSize: displayWidth(context) * 0.05,
                        fontWeight: FontWeight.bold,
                        color: Colors.orange.withOpacity(0.6)),
                  ),
                ),
              ),
              Positioned(
                top: displayHeight(context) * 0.04,
                child: Container(
                  child: Image.asset(
                    'images/run2.png',
                    height: displayHeight(context) * 0.37,
                    width: displayWidth(context) * 0.95,
                  ),
                ),
              ),
    
              //top Sponsor button code parts
    
              Positioned(
                top: displayHeight(context) * 0.2,
                left: displayWidth(context) * 0.1,
                child: new RaisedButton(
                  padding: const EdgeInsets.all(10),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0)),
                  child: new Text(
                    'Sponsor A Run',
                    style: TextStyle(
                        fontSize: displayWidth(context) * 0.06,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  color: isButtonPressed
                      ? Colors.orange
                      : Colors.orange.withOpacity(0.4),
                  onPressed: () {
                    setState(() {
                      isButtonPressed = !isButtonPressed;
                    });
                  },
                ),
              ),
    
              Positioned(
                top: displayHeight(context) * 0.08,
                right: displayWidth(context) * 0.03,
                child: Image.asset(
                  'images/pot1.png',
                  height: displayHeight(context) * 0.3,
                  width: displayWidth(context) * 0.3,
                ),
              ),
            ],
          ),

Answer 1

您的图像方向问题将得到解决尝试这样做：

在你的 Pubspec.yml 文件中添加这个包：

dependencies:
  flutter_exif_rotation: ^0.3.2

然后这样做：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_exif_rotation/flutter_exif_rotation.dart';
import 'package:image_picker/image_picker.dart';

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

/// The stateful widget
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

/// The class with the scaffold
class _MyAppState extends State<MyApp> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final image = await picker.getImage(source: ImageSource.gallery);
    if (image != null && image.path != null) {
      File rotatedImage =
          await FlutterExifRotation.rotateImage(path: image.path);

      if (image != null) {
        setState(() {
          _image = rotatedImage;
        });
      }
    }
  }

  Future getImageAndSave() async {
    final image = await picker.getImage(source: ImageSource.gallery);
    if (image != null && image.path != null) {
      File rotatedImage =
          await FlutterExifRotation.rotateAndSaveImage(path: image.path);

      if (image != null) {
        setState(() {
          _image = rotatedImage;
        });
      }
    }
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Exif flutter rotation image example app'),
        ),
        body: new Center(
          child: _image == null
              ? new Text('No image selected.')
              : new Image.file(_image),
        ),
        persistentFooterButtons: <Widget>[
          new FloatingActionButton(
            onPressed: getImageAndSave,
            tooltip: 'Pick Image and save',
            child: new Icon(Icons.save),
          ),
          new FloatingActionButton(
            onPressed: getImage,
            tooltip: 'Pick Image without saving',
            child: new Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}