提问人：Owais Mustafa 提问时间：11/18/2023 最后编辑：NimanthaOwais Mustafa 更新时间：11/18/2023 访问量：64
我想做这个，谁能说怎么做这个？
I want to make this can anyone tell how to made 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)),
)
)
],
)
],
)
);
答：
0赞
Rayan Wu
11/18/2023
#1
首先，堆栈（堆栈类）中子项的顺序是最后一个子项应该放在前面，这意味着在代码中，带有容器的最后一行将覆盖带有文本的第一行。
对于较浅的蓝色框，只能使用一个具有下边框半径的容器，而不是将两个具有角半径的容器对齐。
我不是专家，所以也许这不是最好的方法，但我会使用一个堆栈，其中一个容器用于背景元素，一列用于前景元素（文本和图像）。
一些提示：
- 在开发时，我建议你为你的元素使用很多颜色（红色、琥珀色、粉红色），这样更容易理解屏幕上发生的事情以及每个组件的局限性。
- 您可以使用“您的代码在这里”将代码放入堆栈问题中，以便人们更容易理解和帮助您。
这是我使用您的图像作为参考创建的小部件：
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),
),
),
)
],
)
],
),
);
}
}
3赞
Chirag Parmar
11/18/2023
#2
尝试使用此代码片段
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,
),
),
),
],
),
),
);
},
),
评论