flutter 需要一种方法来裁剪圆角矩形内的边框,

vs3odd8k  于 4个月前  发布在  Flutter
关注(0)|答案(3)|浏览(51)

要解决这个问题,可以在ClipRRect中设置borderRadius参数为0。这样,裁剪区域将只包括内部的圆角矩形,而不包括外部的圆角矩形。以下是修改后的Dart代码:

ClipRRect(
  borderRadius: BorderRadius.zero,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

这段代码将创建一个蓝色的圆角矩形,其裁剪区域仅包括内部的圆角矩形,而不包括外部的圆角矩形。

roejwanj

roejwanj1#

我可以复现报告中的内容。
完整示例代码:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MainApp(),
    ),
  );
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

const color = Colors.blue;

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 100,
          margin: const EdgeInsets.only(bottom: 12),
          decoration: BoxDecoration(
            border: Border.all(
              color: color.shade300,
              width: 10,
            ),
            borderRadius: BorderRadius.circular(30),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(30),
            child: Column(
              children: [
                Container(
                  color: color.shade300,
                  width: double.infinity,
                  child: const Padding(
                    padding: EdgeInsets.all(6),
                    child: Center(
                      child: Text(
                        'Annual subscription',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  color: color.shade50,
                  child: const Padding(
                    padding: EdgeInsets.all(6),
                    child: Center(
                      child: Text(
                        '\$269/year (save 25%)',
                        style: TextStyle(
                          fontSize: 18,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (稳定版和主版本)

[✓] Flutter (Channel stable, 3.22.1, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.1 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a14f74ff3a (11 hours ago), 2024-05-22 11:08:21 -0500
    • Engine revision 55eae6864b
    • Dart version 3.4.1
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 125.0.6422.76

[✓] Network resources
    • All expected network resources are available.

• No issues found!
[!] Flutter (Channel master, 3.23.0-13.0.pre.87, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.23.0-13.0.pre.87 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c246ecdf8e (2 hours ago), 2024-06-03 18:06:22 -0700
    • Engine revision a6aa5d8266
    • Dart version 3.5.0 (build 3.5.0-218.0.dev)
    • DevTools version 2.36.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (4 available)
    • Pixel 7 (mobile) • 2B171FDH20084L                           • android-arm64  • Android 14 (API 34)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 125.0.6422.141

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
bhmjp9jg

bhmjp9jg2#

你好@lukehutch,由于你给Container设置了边框宽度,你需要调整ClipRRect的边框半径。ClipRRect的边框半径应计算为总边框半径减去Container的宽度。在这种情况下,你应该从总边框半径(30)中减去Container的宽度(10)。因此,ClipRRect应该有20的边框半径。

iyfamqjs

iyfamqjs3#

你好@lukehutch,既然你给Container设置了边框宽度,那么你需要调整ClipRRect的边框半径。ClipRRect的边框半径应该等于总边框半径减去Container的宽度。在这个例子中,你应该从总边框半径(30)中减去Container的宽度(10)。因此,ClipRRect应该有20的边框半径。

是的,这正是我在第二个代码片段中所做的。这样做确实很麻烦,但即使进行了这样的修正,你仍然会在容器边框和内容之间看到一条细白线。

相关问题