flutter 我想做这个,有人能告诉我怎么做吗?

dced5bon  于 2023-11-21  发布在  Flutter
关注(0)|答案(2)|浏览(123)

How can I do this?
我已经试过了,但它不是我想要的

Container(
  height: 900,
  width: double.maxFinite,
  color: const Color(0xff070540),
  child: Stack(
    children: [
      Padding(
        padding: EdgeInsets.only(left: 15, right: 15, top: 15),
        child: Container(
          height: 30,
          color: Color(0xff2147AF),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.arrow_back),
              Text(
                'Details of Athlete',
                style: TextStyle(fontSize: 15),
              ),
              Icon(Icons.thumb_up_sharp),
            ],
          ),
        ),
      ),
      Row(
        children: [
          Container(
            height: 150,
            width: 80,
            decoration: const BoxDecoration(
              color: Color(0xff2147AF),
              borderRadius:
                BorderRadius.only(bottomRight: Radius.circular(20)),
            )
          ),
          Container(
            height: 150,
            width: 80,
            decoration: const BoxDecoration(
              color: Color(0xff2147AF),
              borderRadius:
                BorderRadius.only(bottomLeft: Radius.circular(20)),
            )
          )
        ],
      )
    ],
  )
);

字符串

q1qsirdb

q1qsirdb1#

尝试使用此代码片段

Builder(
        builder: (context) {
          return SafeArea(
            child: Scaffold(
              backgroundColor: const Color(0xff070540),
              body: Stack(
                clipBehavior: Clip.none,
                alignment: AlignmentDirectional.center,
                fit: StackFit.loose,
                children: [
                  Container(
                    height: MediaQuery.of(context).size.height * 0.4,
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    width: double.infinity,
                    decoration: const BoxDecoration(
                      color: Color(0xff2147AF),
                      borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(20),
                        bottomLeft: Radius.circular(20),
                      ),
                    ),
                    child: Column(
                      children: [
                        const SizedBox(height: 60),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: const [
                            Icon(
                              Icons.arrow_back,
                              color: Colors.white,
                            ),
                            Text(
                              'Your content',
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                              ),
                            ),
                            Icon(
                              Icons.thumb_up_sharp,
                              color: Colors.white,
                            ),
                          ],
                        ),
                        const SizedBox(height: 16),
                        const Text(
                          'Your Name',
                          style: TextStyle(
                            fontSize: 28,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 16),
                        Text(
                          'Your Position',
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.white.withOpacity(0.5),
                          ),
                        ),
                        const SizedBox(height: 16),
                      ],
                    ),
                  ),
                  Positioned(
                    top: MediaQuery.of(context).size.height * 0.3,
                    child: Container(
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: const Color(0xff070540),
                          width: 5.0, // Choose the border width
                        ),
                      ),
                      child: const CircleAvatar(
                        radius: 80,
                        backgroundColor: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),

字符串


的数据

nkoocmlb

nkoocmlb2#

首先,Stack(Stack Class)中子元素的顺序是最后一个子元素应该放在最前面,这意味着在你的代码中,最后一个包含容器的Row将覆盖第一个包含文本的Row。
对于浅蓝色的盒子,你可以只使用一个带有底部边框半径的容器,而不是用一个角半径对齐两个容器。
我不是Maven,所以这可能不是最好的方法,但我会使用一个Stack,其中一个容器用于背景元素,一个列用于前景元素(文本和图像)。
一些提示:

  • 在开发时,我建议你为元素使用很多颜色(红色,琥珀色,粉红色),这样更容易理解屏幕上发生的事情以及每个组件的限制。
  • 你可以使用“你的代码在这里”把代码放在堆栈问题中,这样人们就更容易理解和帮助你。

这是我用你的图片作为参考创建的一个小部件:

import 'package:flutter/material.dart';

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

// I'm setting the colors here so it's easier to reference then and change later if needed;
  final Color blue = const Color(0xff070540);
  final Color lighterBlue = const Color(0xff2147AF);
  final Color white = Colors.white;

  @override
  Widget build(BuildContext context) {
    // The MediaQuery.sizeOf(context) returns the dimensions of the screen so you can
    //be sure everything is gonna fit on the device.
    final double width = MediaQuery.sizeOf(context).width;
    final double height = MediaQuery.sizeOf(context).height;
    return Scaffold(
      body: Stack(
        children: [
          // First container with the blue background elements
          Container(
            width: width,
            height: height,
            //  You need to specify the alignment of the Parent Container so the Child Container
            // does not grow to the size of parent.
            alignment: Alignment.topCenter,
            color: blue,
            child: Container(
              width: width,
              height: height * 0.5,
              decoration: BoxDecoration(
                  // Here we set the border radius of the bottom part of the Container
                  borderRadius: const BorderRadius.vertical(
                    bottom: Radius.circular(30),
                  ),
                  color: lighterBlue),
            ),
          ),
          // This column is the foreground element with the Text and Image
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.fromLTRB(
                    width * 0.1, height * 0.1, width * 0.1, 25),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Icon(
                      Icons.arrow_back_ios,
                      color: white,
                      size: 34,
                    ),
                    Text(
                      "Some Text",
                      style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.w500,
                          color: white),
                    ),
                    Icon(
                      Icons.thumb_up,
                      color: white,
                      size: 34,
                    )
                  ],
                ),
              ),
              Text(
                "TITLE",
                style: TextStyle(color: white, fontSize: 40),
              ),
              Text(
                "subtitle",
                style: TextStyle(color: Colors.grey[400], fontSize: 20),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Container(
                  width: width * 0.6,
                  height: width * 0.6,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                        color: blue,
                        strokeAlign: BorderSide.strokeAlignOutside,
                        width: 10),
                    // Here you can chaneg the Image.network link to your image, or use some
                    //  other widget to display the image you want;
                    image: DecorationImage(
                        image: Image.network("https://picsum.photos/300/300")
                            .image),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

字符串

相关问题