容器的子级采用父级的形状

Question

我希望Container小部件的子部件应用其父部件的圆角。我可以将父容器小部件设置为圆角，但其子容器不能。我将容器蓝色作为父窗口小部件，绿色是其子窗口小部件。我得到这个：

实际结果

预期结果

代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(children: [
          Container(
            color: Colors.teal,
            child: Column(
              children: [
                Expanded(
                  //Parent Container
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(50),
                          bottomRight: Radius.circular(50)),
                    ),
                    //Child Container
                    child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          color: Colors.green,
                        )),
                  ),
                ),
                Container(
                  color: Colors.teal,
                  padding: const EdgeInsets.all(20.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.yellow,
                      ),
                      CircleAvatar(
                        backgroundColor: Colors.yellow,
                      ),
                      CircleAvatar(
                        backgroundColor: Colors.yellow,
                      ),
                      CircleAvatar(
                        backgroundColor: Colors.yellow,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ]),
      ),
    );
  }
}

Answer 1

您只需将ClipBehavior设置为父容器：

Expanded(
   //Parent Container
   child: Container(
      clipBehavior: Clip.hardEdge,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
         color: Colors.blue,
         borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(50),
         bottomRight: Radius.circular(50)),
      ),
      //Child Container
      child: Container(
         color: Colors.green,
      ),
   ),
),