如何在不溢出和滚动的情况下自动缩放图像以适应各种分辨率？

Question

我是新来的，我的英语很糟糕。请简单易懂的回答... 我已经尝试使用 AspectRatio Widget，但它与 Center 小部件结合使用，将我的按钮移到了中心。除此之外，它还有效，但按钮确实需要粘在一边。到目前为止，这是我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';

AppBrain contentData = AppBrain();

class SwipePage extends StatefulWidget {
  SwipePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _SwipePage createState() => _SwipePage();
}

class _SwipePage extends State<SwipePage> {
  @override
  Widget build(BuildContext context) {
    return SwipeDetector(
      swipeConfiguration: SwipeConfiguration(
          horizontalSwipeMaxHeightThreshold: 80.0,
          horizontalSwipeMinDisplacement: 30.0,
          horizontalSwipeMinVelocity: 150.0),
      onSwipeLeft: () {
        Navigator.of(context).push(
          toInformationPage(),
        );
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(top: 20, bottom: 20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20),
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      AppBrain().getImageAdress(),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, bottom: 20),
                  child: Divider(
                    color: Colors.grey,
                    height: 20,
                    thickness: 2,
                    indent: 120,
                    endIndent: 120,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                          color: buttonColor,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                            bottomRight: Radius.circular(50),
                          ),
                        ),
                        child: MaterialButton(
                          height: 60,
                          onPressed: () {},
                          textColor: red,
                          child: Icon(
                            Icons.close,
                            size: 45,
                          ),
                        ),
                      ),
                      Container(
                        width: 120,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: buttonColor,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(50),
                            bottomLeft: Radius.circular(50),
                          ),
                        ),
                        child: MaterialButton(
                          height: 60,
                          onPressed: () {
                            Navigator.of(context).push(
                              toInformationPage(),
                            );
                          },
                          textColor: green,
                          child: Icon(
                            Icons.check,
                            size: 45,
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这是现在的样子： https://imgur.com/a/2kgpJ6A 这是在所有宽高比和分辨率下应该看起来的样子（图像应该只是按比例缩小..）： https://imgur.com/FBNlpDa

Answer 1

查看您的代码，您至少有两个不同的问题。

设置正确的图像适合 - 您可以在 Image.asset(fit: boxFit.contain, .... ) 中使用 BoxFit.contain 以确保调整大小以包含在 parent.
您有一个 Column 并希望第一个 child 占据所有可用宽度。因此，您应该将其嵌套在 Expanded 小部件中。

即。结构上类似于：

Column(
  children: [
    Expanded(
      // your image goes here which will take as much height as possible.
      child: Image.asset('asset', fit: BoxFit.contain),
    ),
    Container(
      // your button bar which takes up the rest of the height
      child: MaterialButton( ... ),
    ),
  ],
);

我遗漏了很多，但我希望你能理解要点。

Answer 2

我想我是在 Herbert 的帮助下自己修复的，谢谢 :)。我将包含我的图像的 Container 包装在一个 Expanded 小部件中，并将 flex 值设置为 3。这是我的新代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';

AppBrain contentData = AppBrain();

class SwipePage extends StatefulWidget {
  SwipePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _SwipePage createState() => _SwipePage();
}

class _SwipePage extends State<SwipePage> {
  @override
  Widget build(BuildContext context) {
    return SwipeDetector(
      swipeConfiguration: SwipeConfiguration(
          horizontalSwipeMaxHeightThreshold: 80.0,
          horizontalSwipeMinDisplacement: 30.0,
          horizontalSwipeMinVelocity: 150.0),
      onSwipeLeft: () {
        Navigator.of(context).push(
          toInformationPage(),
        );
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                flex: 4,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20),
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      AppBrain().getImageAdress(),
                      fit: BoxFit.contain,
                    ),
                  ),
                  margin: EdgeInsets.fromLTRB(25, 25, 25, 0),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                  top: 20.0,
                ),
                child: Divider(
                  color: Colors.grey,
                  height: 20,
                  thickness: 2,
                  indent: 120,
                  endIndent: 120,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 25),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                        color: buttonColor,
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(50),
                          bottomRight: Radius.circular(50),
                        ),
                      ),
                      child: MaterialButton(
                        height: 60,
                        onPressed: () {},
                        textColor: red,
                        child: Icon(
                          Icons.close,
                          size: 45,
                        ),
                      ),
                    ),
                    Container(
                      width: 120,
                    ),
                    Container(
                      decoration: BoxDecoration(
                        color: buttonColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(50),
                          bottomLeft: Radius.circular(50),
                        ),
                      ),
                      child: MaterialButton(
                        height: 60,
                        onPressed: () {
                          Navigator.of(context).push(
                            toInformationPage(),
                          );
                        },
                        textColor: green,
                        child: Icon(
                          Icons.check,
                          size: 45,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

您也可以尝试使用 FittedBox 小部件。

如何在不溢出和滚动的情况下自动缩放图像以适应各种分辨率？

How do I automatically scale images in flutter to fit every resolution without overflow and scrolling?

layout

aspect-ratio

dart

flutter