颤动：背景图像的质量损失

Question

当我修改覆盖元素的不透明度时，背景图像存在明显的质量损失。

_{为容器使用透明颜色不会影响底层图像的质量。然而，合并不透明度值会导致渲染的图像保真度降低并出现视觉缺陷。}

我的代码：

主屏幕

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:otobusum_nerede_mobile_clone/components/main_appbar.dart';


class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ));
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: const Color(0xFFF7F7FA),
      appBar: const MainAppBar(
        title: "Otobüsüm Nerede?",
        height: 90,
      ),
      bottomNavigationBar: BeautifulNavigationBar(
        height: MediaQuery.of(context).size.width * 0.16,
      ),
      body: Column(
        ...
      ),
    );
  }
}

主应用栏小部件

import 'package:flutter/material.dart';
import '../constants/paddings.dart';

class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final double height;
  const MainAppBar({required this.title, required this.height, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: GeneralPaddings.generalPageIndentPadding.value()),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.6),
        borderRadius: const BorderRadius.only(bottomRight: Radius.circular(120)),
      ),
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.asset(
                      'assets/images/logo.png',
                      width: 32.0,
                    ),
                    RichText(
                      text: const TextSpan(
                        children: [
                          TextSpan(
                            text: 'Otobüsüm',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.w800,
                            ),
                          ),
                          TextSpan(
                            text: 'Nerede?',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w300,
                              fontSize: 20,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Image.asset(
                  'assets/images/menu3.png',
                  width: 32.0,
                  color: Colors.white,
                ),
              ],
            ),
            const Text(
              "Merhaba",
              style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size(double.infinity, height);
}

我尝试了“混合模式”功能，但不起作用。

...
decoration: BoxDecoration(
        backgroundBlendMode: BlendMode....,
        color: Colors.black.withOpacity(0.6),
        borderRadius: const BorderRadius.only(bottomRight: Radius.circular(120)),
      ),
...

Answer 1

您在物理设备和模拟器上都尝试过吗？因为如果您使用模拟器，有时质量将无法与真正的智能手机上的质量相匹配。