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

标签： flutterdartlayoutaspect-ratio

Answer 1

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