英文:
Why I am Facing conflict while using Column inside Row widget for creating a layout in Flutter
问题
面对在 Row 中使用 Column widget 时的冲突。
嗨，我正在在 Flutter 中实现下面提到的设计，但遇到了下面图片中指出的问题。
我不想为了学习而使用任何外部包。在此先感谢您的帮助。
期望结果：
预期
实际结果：
布局混乱
以下是我现在使用的代码片段。
upload_screen.dart
import 'package:flutter/material.dart';
class StepProgressBar extends StatelessWidget {
const StepProgressBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Row(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
StepWithPlaceHolder(label: "1", title: "Choose File"),
Expanded(child: Divider(thickness: 7,height: 5,)),
StepWithPlaceHolder(label: "2", title: "Finish")
]);
}
}
class StepWithPlaceHolder extends StatelessWidget {
final String label;
final String title;
const StepWithPlaceHolder(
{Key? key, required this.label, required this.title})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 55,
height: 55,
decoration: BoxDecoration(
border: Border.all(width: 2, style: BorderStyle.none),
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
label,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
),
),
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
),
],
);
}
}
}
英文:
Facing conflicts while using Column widget in Row.
Hi, I am implementing below mentioned design in flutter but something went wrong mentioned in below image.
I don't want to use any external package for learning purpose. Thanks for your help in advance.
Expectations:-
Expected
Reality:-
Messed up layout
below are the code snippet, which I am using now.
upload_screen.dart
import 'package:flutter/material.dart';
class StepProgressBar extends StatelessWidget {
const StepProgressBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Row(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
StepWithPlaceHolder(label: "1", title: "Choose File"),
Expanded(child: Divider(thickness: 7,height: 5,)),
StepWithPlaceHolder(label: "2", title: "Finish")
]);
}
}
class StepWithPlaceHolder extends StatelessWidget {
final String label;
final String title;
const StepWithPlaceHolder(
{Key? key, required this.label, required this.title})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 55,
height: 55,
decoration: BoxDecoration(
border: Border.all(width: 2, style: BorderStyle.none),
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
label,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
),
),
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
),
],
);
}
}
}
答案1
得分: 0
Wrap your Row widget with SizedBox with the needed height.
SizedBox(
height: 80,
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//....
Padding(
padding: EdgeInsets.only(right: 10, bottom: 10), // for padding around Divider
child:Divider(
thickness: 7,
height: 5,
),
),
// ....
],
),
),
输出:
注意: 或者用一个 Container 包装而不是 SizedBox，如果你想在周围添加一些边距。
英文:
Wrap your Row widget with SizedBox with the needed height.
SizedBox(
height: 80,
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//....
Padding(
padding: EdgeInsets.only(right: 10, bottom: 10), // for padding around Divider
child:Divider(
thickness: 7,
height: 5,
),
),
// ....
],
),
),
OUTPUT:
Note: Or wrap With a Container instead of SizedBox if you want to add some margin around it.
答案2
得分: 0
以下是代码的中文翻译部分：
import 'package:flutter/material.dart';
class StepProgressBar extends StatelessWidget {
const StepProgressBar({Key? key}) : super(key: key);
final list = const [{"label":"1","title":"选择文件"},{"label":"2","title":"完成"}];
@override
Widget build(BuildContext context) {
var widgets = <Widget>[];
var textWidgets = <Widget>[];
for(int counter=0;counter<list.length;counter++){
var item = list0+网站访问量;
if(counter != 0){
textWidgets.add(Text(
item["title"] ?? "",
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
));
widgets.add(
Expanded(child: Divider(thickness: 7,height: 5,)),
);
widgets.add(StepWithPlaceHolder(label: item["label"] ?? "",));
}else{
textWidgets.add(Text(
item["title"] ?? "",
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
));
widgets.add(StepWithPlaceHolder(label: item["label"] ?? "", ));
}
}
return Scaffold(
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: widgets
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: textWidgets,
)
],
),
),
);
}
}
class StepWithPlaceHolder extends StatelessWidget {
final String label;
const StepWithPlaceHolder(
{Key? key, required this.label})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 55,
height: 55,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
border: Border.all(width: 2, style: BorderStyle.none),
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
label,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
),
),
],
);
}
}
请注意，这段代码用于创建一个步骤进度条，其中包括两个步骤：“选择文件”和“完成”。您可以根据需要进行优化或参考。
英文:
I have tried to make it dynamic so you will just need to change list in order to manage your views and here is code
import 'package:flutter/material.dart';
class StepProgressBar extends StatelessWidget {
const StepProgressBar({Key? key}) : super(key: key);
final list = const [{"label":"1","title":"Choose File"},{"label":"2","title":"Finish"}];
@override
Widget build(BuildContext context) {
var widgets = <Widget>[];
var textWidgets = <Widget>[];
for(int counter=0;counter<list.length;counter++){
var item = list0+网站访问量;
if(counter != 0){
textWidgets.add(Text(
item["title"] ?? "",
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
));
widgets.add(
Expanded(child: Divider(thickness: 7,height: 5,)),
);
widgets.add(StepWithPlaceHolder(label: item["label"] ?? "",));
}else{
textWidgets.add(Text(
item["title"] ?? "",
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
color: Colors.black,
),
));
widgets.add(StepWithPlaceHolder(label: item["label"] ?? "", ));
}
}
return Scaffold(
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: widgets
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: textWidgets,
)
],
),
),
);
}
}
class StepWithPlaceHolder extends StatelessWidget {
final String label;
const StepWithPlaceHolder(
{Key? key, required this.label})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 55,
height: 55,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
border: Border.all(width: 2, style: BorderStyle.none),
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
label,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
),
),
],
);
}
}
Code is not much optimized but you can refer it
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论