顫振繪制容器，中心有曲線

我想用顫振繪制黑色容器形狀。

uj5u.com熱心網友回復：

有很多方法可以做到這一點，第一次我以為是剪輯，我在想一個ClipPath小部件，但現在我看到你的黑色頂部有一個圓形小部件Container。

這是一個例子：

class FunnyContainer extends StatelessWidget {
  const FunnyContainer({Key? key}) : super(key: key);

  Widget _childContainer() {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
            color: Colors.yellow,
            width: 4,
          ),
          borderRadius: const BorderRadius.all(Radius.circular(20)),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 40),
        child: Container(
          height: 400,
          decoration: const BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const SizedBox(height: 40),
                  Expanded(child: _childContainer()),
                  Expanded(child: _childContainer()),
                  Expanded(child: _childContainer()),
                ],
              ),
              const Positioned(
                left: 0,
                right: 0,
                top: -50,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 40,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

結果：

更新（使用您更新的設計）

現在您更新了您的帖子，這可以使用 Clippers 完成，問題是剪輯需要 Shadow，所以我使用了以下代碼：

您只需要更新 Path 以獲得Container.

uj5u.com熱心網友回復：

您可以使用Stackwhich 可以在容器頂部寫畫圈，如下所示：

class BlackContainer extends StatelessWidget {
  const BlackContainer({
    Key? key,
    required this.child,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        Container(
          child: child,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.black,
            boxShadow: const [
              BoxShadow(
                color: Colors.grey,
                spreadRadius: 5,
                blurRadius: 10,
              ),
            ],
          ),
        ),
        Positioned(
          top: -25,
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            width: 40,
            height: 40,
          ),
        ),
      ],
    );
  }
}

并像這樣使用它：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlackContainer(
          child: Text(
            'Content here',
            style: Theme.of(context)
                .textTheme
                .bodyText2!
                .copyWith(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

在容器頂部放置一個透明的 png。

    child: Container(
      width: 200,
      height: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Colors.black,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Container(
        child: Image.asset('assets/images/half-circle.png', fit: BoxFit.contain, alignment: new Alignment(-1.0, -1.0)),
        margin: EdgeInsets.only(left: 50.0, right: 50.0),
      ),
    ),

圖片：

活生生的例子

標籤：扑 镖 用户界面

上一篇：將新資料從CSV匯入Google表格，其中新資料可以在任何新行上

下一篇：是否可以在噴氣背包中顯示影片gif？