如何自动缩放图像以适应各种分辨率，而不会发生溢出和滚动？

编程问答 2022-08-15

问题描述

我是新来的，我的英语不好。请回答容易理解的内容... 我已经尝试过使用AspectRatio窗口小部件，但是它与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(
          to@R_459_4045@ionPage(),);
      },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,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),onpressed: () {
                            Navigator.of(context).push(
                              to@R_459_4045@ionPage(),);
                          },textColor: green,child: Icon(
                            Icons.check,)
              ],);
  }
}

这是现在的样子： https://imgur.com/a/2kgpJ6A 这是在所有纵横比和分辨率下的外观（图像应按比例缩小。）： https://imgur.com/FBNlpDa

解决方法

看看您的代码，您至少遇到两个不同的问题。

  1. 设置正确的图像适合度-您可以在BoxFit.contain中使用Image.asset(fit: boxFit.contain,.... )，以确保将其调整大小以包含在其父项中。
  2. 您有一个Column，并且希望第一个孩子采用所有可用宽度。因此，您应该将其嵌套在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( ... ),],);

我省略了很多，但我希望你能理解。

,

我想我自己在Herbert的帮助下修复了它，谢谢:)。我将包含图像的容器包装在“扩展”小部件中，并将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,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),onPressed: () {
                          Navigator.of(context).push(
                            toInformationPage(),);
                        },textColor: green,child: Icon(
                          Icons.check,)
            ],);
  }
}
,

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

aspect-ratiodartlayout