英文:
Aligning children widgets under Stack Widget properly
问题
我想询问如何正确地对齐堆叠下的小部件，我仍然对使用“Position”小部件感到困惑，所以我只是使用Container来放置我的Text小部件。
这是图像输出，“Name”位于顶部，我想将它放在圆形图像下方（请检查红色文本，这就是我想要的位置），依此类推。
以下是我上面示例图像的源代码..
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
),
Padding(
padding: const EdgeInsets.only(top: 15, left: 10, right: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey.shade200, // border color
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(1), // border width
child: Container(
// or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
.withOpacity(0.25), // inner circle color
),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondPage()),
);
},
child: const Icon(
EvaIcons.settings_2_outline)), // inner content
),
),
)
],
),
),
Center(
child: SizedBox(
height: MediaQuery.of(context).size.height / 3,
child: CircleAvatar(
radius: 53.5,
backgroundColor: Colors.grey.shade200,
child: const CircleAvatar(
radius: 50,
backgroundImage: CachedNetworkImageProvider(
'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
),
),
),
),
const Center(
child: Text(
"Name",
style: TextStyle(color: Colors.white),
),
)
],
),
)),
);
我将不会回答问题，只提供翻译，如果您有其他问题，请随时提出。
英文:
I would like to ask how do I properly align the widgets under the stack, I am still confused using the Position Widget and so I am just using Container for my Text Widget.
Here is the image output, the Name is at the top, I wanted to position it under the circular image(check the red texts, that's how I wanted it to be positioned) and so on
Here is my source code for the sample image above..
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
),
Padding(
padding: const EdgeInsets.only(top: 15, left: 10, right: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey.shade200, // border color
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(1), // border width
child: Container(
// or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
.withOpacity(0.25), // inner circle color
),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondPage()),
);
},
child: const Icon(
EvaIcons.settings_2_outline)), // inner content
),
),
)
],
),
),
Center(
child: SizedBox(
height: MediaQuery.of(context).size.height / 3,
child: CircleAvatar(
radius: 53.5,
backgroundColor: Colors.grey.shade200,
child: const CircleAvatar(
radius: 50,
backgroundImage: CachedNetworkImageProvider(
'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
),
),
),
),
const Center(
child: Text(
"Name",
style: TextStyle(color: Colors.white),
),
)
],
),
)),
);
I would appreciate any help with an explanation as well how it should be achieved, I am just really confused with the Stack Widget now.
答案1
得分: 0
以下是翻译好的部分：
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
alignment: Alignment.center, //<----- align the stack center
children: <Widget>[
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
),
Positioned(//<---- Change padding to postioned
top: 15,
left: 10,
right: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey.shade200, // 边框颜色
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(1), // 边框宽度
child: Container(
// 或者使用 ClipRRect 如果需要裁剪内容
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
.withOpacity(0.25), // 内部圆圈颜色
),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondPage()),
);
},
child: const Icon(EvaIcons
.settings_2_outline)), // 内部内容
),
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Column(
//<------将图像和文本放在列中
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
// height: MediaQuery.of(context).size.height / 3,
child: CircleAvatar(
radius: 53.5,
backgroundColor: Colors.grey.shade200,
child: const CircleAvatar(
radius: 50,
backgroundImage: CachedNetworkImageProvider(
'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
),
),
),
const Text(
"Name",
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
)),
);
希望这对你有所帮助！如果你有任何其他问题，欢迎提出。
英文:
what i would do is
- center align the stack
- put the image and the name text in a column
- change the padding for the settings icon to a Positioned with the same properties.
so the code will look something like this:
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
alignment: Alignment.center, //<----- align the stack center
children: <Widget>[
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
),
Positioned(//<---- Change padding to postioned
top: 15,
left: 10,
right: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey.shade200, // border color
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(1), // border width
child: Container(
// or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
.withOpacity(0.25), // inner circle color
),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondPage()),
);
},
child: const Icon(EvaIcons
.settings_2_outline)), // inner content
),
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Column(
//<------Put image and text in Column
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
// height: MediaQuery.of(context).size.height / 3,
child: CircleAvatar(
radius: 53.5,
backgroundColor: Colors.grey.shade200,
child: const CircleAvatar(
radius: 50,
backgroundImage: CachedNetworkImageProvider(
'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
),
),
),
const Text(
"Name",
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
)),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论