如何在 Flutter 上進行雙曲線布局

Question

如何在 Flutter 上實現這種雙曲面布局？ 高度和寬度的double.infinity 。 不要介意文字和顏色，任何顏色都可以。 謝謝：）

Answer 1

您可以將Column與兩個Flexible小部件一起使用，它們都包含一個Stack作為子小部件，並且每個小部件中都有兩個Container小部件。 這樣，容器將彼此疊放，其中一個可以帶有圓角裝飾：

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: Scaffold(body: MyWidget()),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Flexible(
          flex: 1,
          child: Stack(children: [
            Container(
              color: Colors.blue,
            ),
            Container(
                decoration: const BoxDecoration(
              borderRadius:
                  BorderRadius.only(bottomRight: Radius.circular(100)),
              color: Colors.yellow,
            ))
          ])),
      Flexible(
        flex: 3,
        child: Stack(children: [
          Container(
            color: Colors.yellow,
          ),
          Container(
              decoration: const BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(100)),
          ))
        ]),
      )
    ]);
  }
}

結果將是這樣的：

Answer 2

感謝您的回答@Peter Koltai，您的回答完全正確。 謝謝版主，請關閉此線程。 謝謝