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

Question

我是新手，我的英语很差。请回答简单易懂的...
我已经尝试过使用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(
          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

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

设置正确的图像适合度-您可以在BoxFit.contain中使用Image.asset(fit: boxFit.contain, .... )来确保将其调整大小以包含在其父级中。

您有一个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( ... ),
    ),
  ],
);

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