如何在 flutter 中自动缩放图像以适应每种分辨率而不会溢出和滚动？

Question

我是新人，我的英语很差。请回答易于理解的问题...我已经尝试使用 AspectRatio 小部件，但它与中心小部件相结合，将我的按钮移动到了中心。除此之外，它确实有效，但按钮确实需要粘在一边。到目前为止，这是我的代码：

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: //i.stack.imgur.com/xVj0y.jpg 这就是它在所有宽高比和分辨率上的样子（图像应该缩小......）： https： //i.stack.imgur.com/0oGdE.jpg

Answer 1

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

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

IE。结构上类似于：

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

我遗漏了很多，但我希望你能明白要点。