Flutter 垂直分隔线未显示在行中
我试图在一行中添加一个垂直分隔符。分隔符的宽度已设置,但未显示分隔符。我还尝试了IntrinsicHeight小部件,它现在可以工作了。但建议不要在其他线程中使用该选项。有解决办法吗 代码如下:Flutter 垂直分隔线未显示在行中,flutter,flutter-layout,flutter-dependencies,flutter-animation,Flutter,Flutter Layout,Flutter Dependencies,Flutter Animation,我试图在一行中添加一个垂直分隔符。分隔符的宽度已设置,但未显示分隔符。我还尝试了IntrinsicHeight小部件,它现在可以工作了。但建议不要在其他线程中使用该选项。有解决办法吗 代码如下: import 'package:flutter/material.dart'; import 'package:focus7/Configurations/styles.dart'; import 'package:focus7/Widgets/settings.dart'; class Profil
import 'package:flutter/material.dart';
import 'package:focus7/Configurations/styles.dart';
import 'package:focus7/Widgets/settings.dart';
class Profile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Shader textGradient =
Styles.primaryGradient.createShader(Rect.fromLTWH(0.0, 0.0, 50, 50));
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 40),
child: Align(alignment: Alignment.centerRight, child: SettingsIcon()),
),
SizedBox(height: 30),
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 60,
backgroundColor: Colors.amber,
backgroundImage: AssetImage("Assets/ninja_image_png.png"),
)),
SizedBox(height: 10),
Text(
"Bala Ganesh",
style: Styles.titleWhiteTextStyle,
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Text(
"LEVEL",
style: Styles.normalWhiteTextStyle
.copyWith(foreground: Paint()..shader = textGradient),
),
SizedBox(height: 10),
Text(
"4",
style: Styles.normalWhiteTextStyle,
),
],
),
VerticalDivider(color: Styles.primaryWhite,thickness: 10,width: 20,),
Column(
children: <Widget>[
Text(
"POINTS",
style: Styles.normalWhiteTextStyle
.copyWith(foreground: Paint()..shader = textGradient),
),
SizedBox(height: 10),
Text(
"250",
style: Styles.normalWhiteTextStyle,
),
],
),
],
),
],
);
}
}
导入“包装:颤振/材料.省道”;
导入“package:focus7/Configurations/styles.dart”;
导入“package:focus7/Widgets/settings.dart”;
类配置文件扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
最终着色器文本渐变=
Styles.primaryGradient.createShader(Rect.fromLTWH(0.0,0.0,50,50));
返回列(
儿童:[
填充物(
填充:仅限常量边集(顶部:40),
子项:对齐(对齐:alignment.centerRight,子项:SettingsIcon()),
),
尺寸箱(高度:30),
对齐(
对齐:对齐.center,
孩子:圆环星(
半径:60,
背景颜色:Colors.amber,
背景图片:AssetImage(“Assets/ninja_image_png.png”),
)),
尺寸箱(高度:10),
正文(
“巴拉甘尼什”,
style:style.titleWhiteTextStyle,
),
尺寸箱(高度:10),
划船(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
纵队(
儿童:[
正文(
“级别”,
样式:Styles.normalWhiteTextStyle
.copyWith(前景:Paint()…着色器=文本渐变),
),
尺寸箱(高度:10),
正文(
"4",
样式:Styles.normalWhiteTextStyle,
),
],
),
垂直分隔器(颜色:样式。原色白色,厚度:10,宽度:20,),
纵队(
儿童:[
正文(
“积分”,
样式:Styles.normalWhiteTextStyle
.copyWith(前景:Paint()…着色器=文本渐变),
),
尺寸箱(高度:10),
正文(
"250",
样式:Styles.normalWhiteTextStyle,
),
],
),
],
),
],
);
}
}
以下是输出:
使用IntrinsicHeight来包装行小部件将解决您的问题
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Text(
"LEVEL",
),
SizedBox(height: 10),
Text(
"4",
),
],
),
VerticalDivider(
color: Colors.black,
thickness: 10,
width: 20,
),
Column(
children: <Widget>[
Text(
"POINTS",
),
SizedBox(height: 10),
Text(
"250",
),
],
),
],
),
),
IntrinsicHeight(
孩子:排(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
纵队(
儿童:[
正文(
“级别”,
),
尺寸箱(高度:10),
正文(
"4",
),
],
),
垂直分隔器(
颜色:颜色,黑色,
厚度:10,
宽度:20,
),
纵队(
儿童:[
正文(
“积分”,
),
尺寸箱(高度:10),
正文(
"250",
),
],
),
],
),
),
我没有任何问题。。请创建可复制的代码谢谢您的回答。内在高度是有效的,但在文档中,有人说“尽可能避免使用它。在最坏的情况下,这个小部件可能导致树的深度为O(N²)。”,我问是否有其他方法可以实现这个没有固有高度的垂直分隔器,我想你可以简单地使用容器,给出宽度、高度和颜色属性,它们也可以像分隔器一样工作。