Flutter：如何在现有布局上显示圆角布局？

我试图创建一个UI，如下面的flutter：

使用Expanded小部件和它的flex属性，我创建了背景布局。但我不知道如何在上面创建圆角布局。

我的密码：

@override
Widget build(BuildContext context) {
return Column(
    children: <Widget>[
      Expanded(
        flex: 1,
          child: Container(
            color: const Color(0xff32394a),
            child: Image.asset('assets/ic_logo_xx.png'),
          )
      ),
      Expanded(
        flex: 2,
          child: Container(
            color: Colors.white,
          )
      ),
    ]
);
}

我试图使用ClipRRect显示圆角布局，但它没有显示在现有布局的顶部。

使用ClipRRect更新代码

@override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Expanded(
            flex: 1,
              child: Container(
                color: const Color(0xff32394a),
                child: Image.asset('assets/ic_logo_xx.png'),
              )
          ),
          Expanded(
            flex: 1,
            child: ClipRRect( //<---here
              borderRadius :BorderRadius.circular(10),
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: 600,
                decoration: BoxDecoration(
                  color: Color(0xffF6F6F6),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
              child: Container(
                color: Colors.white,
              )
          ),
        ]
    );
  }

结果：

我们不一定需要ClipRRect，我们可以使用Stack，沿着Animated Positioned和Container's BoxDecoration borderRadius属性，用于与您共享的图像类似的应用程序。
Stack帮助我们将小部件放置在另一个小部件的顶部，最后一个小部件位于前一个小部件的顶部。然后，我们可以使用Animated Positioned小部件进行定位。
下面是我的main.dart文件的代码，它足以得到你想要的结果。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Stack(children: <Widget>[
              Positioned(
                  child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.4,
                color: const Color(0xff32394a),
                child: Center(
                    child: MaterialButton(
                        onPressed: () {},
                        child: const Text(
                          'Applogo',
                          style: TextStyle(fontSize: 32),
                        ))),
              )),
              Positioned(
                  top: MediaQuery.of(context).size.height * 0.4 - 64,
                  left: 32,
                  right: 32,
                  child: Column(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width - 64,
                        decoration: BoxDecoration(
                          color: const Color(0xffF6F6F6),
                          borderRadius: BorderRadius.circular(16),
                        ),
                        padding: const EdgeInsets.all(32),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(bottom: 32),
                              child: const Text(
                                'Sign In',
                                style: TextStyle(fontSize: 32),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(bottom: 16),
                              child: TextField(
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(16)),
                                    hintText: 'Email / User name',
                                    contentPadding: const EdgeInsets.only(
                                        left: 16,
                                        right: 16,
                                        top: 8,
                                        bottom: 8)),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(bottom: 16),
                              child: TextField(
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(16)),
                                    hintText: 'Password',
                                    contentPadding: const EdgeInsets.only(
                                        left: 16,
                                        right: 16,
                                        top: 8,
                                        bottom: 8)),
                              ),
                            ),
                            Row(
                              children: [
                                Checkbox(value: false, onChanged: (_) {}),
                                const Text("Remember Me")
                              ],
                            ),
                            Row(
                              mainAxisSize: MainAxisSize.max,
                              children: [
                                Expanded(
                                  child: ElevatedButton(
                                    onPressed: () {},
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: const Color(0x9932394a),
                                    ),
                                    child: const Text("Sign In",
                                        style: TextStyle(
                                          color: Colors.white,
                                        )),
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 16,
                            ),
                            const Row(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text("Forgot Username?"),
                                Text("Forgot Password?"),
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 32),
                        child: const Text(
                          "Don't have an account? Sign Up",
                          style: TextStyle(color: Colors.black),
                        ),
                      )
                    ],
                  )),
            ]),
          ),
        ],
      ),
    );
  }
}

Flutter：如何在现有布局上显示圆角布局？

1条答案

相关问题

热门标签

最新问答