英文:
Divider is not visible in horizontal list view flutter
问题
水平方向的分割线在列表视图中不可见。我尝试将分割线包裹在行或列中，也将其包裹在容器中，但在水平方向上不可见，垂直方向上正常可见。
英文:
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: false,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, int i) {
return Center(
child: Card(
child: GestureDetector(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
SizedBox(
height: 15,
width: 100,
child: ClipRRect(
//borderRadius: BorderRadius.only(topRight: 10,topLeft: 10),
child: Text("admistraction")),
),
Divider(
thickness: 2,
color: Colors.lightBlue,
),
Padding(
padding: EdgeInsets.only(left: 15.0, right: 5),
child: Text(
"Start Learning",
)),
],
),
),
),
);
},
itemCount: 5);
}
Divider horizontal line is not visible in list view.
I tried to wrap a divider in row or column I also wrap it in Container but its not working its working fine with vertical but in horizontal its not visisbale
答案1
得分: 1
使用SizedBox包裹你的分割线，并设置高度和宽度。
SizedBox(
height: 15,
width: 100,
child: Divider(
thickness: 2,
color: Colors.lightBlue,
),
)
英文:
Wrap your divider with SizedBox and give height and width
SizedBox(
height: 15,
width: 100,
child: Divider(
thickness: 2,
color: Colors.lightBlue,
),
),
答案2
得分: 0
如果您正在使用 Column，那么应该将其包裹在 IntrinsicHeight 内，对于 Row，则需要使用 IntrinsicWidth 来显示分隔线。
在您的情况下，您正在使用 Column，应该使用 IntrinsicHeight。
尝试以下代码：
IntrinsicHeight( <---------------- 仅添加这个小部件
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
SizedBox(
height: 15,
width: 100,
child: ClipRRect(
//borderRadius: BorderRadius.only(topRight: 10,topLeft: 10),
child: Text("admistraction")),
),
SizedBox(
height: 50,
width: 50,
child: Divider(
thickness: 2,
color: Colors.lightBlue,
)),
Padding(
padding: EdgeInsets.only(left: 15.0, right: 5),
child: Text("Start Learning")),
],
))
英文:
If you are using Column then you should wrap with IntrinsicHeight and for Row required IntrinsicWidth to show divider.
In your case you are using Column you should use IntrinsicHeight.
Try this code:
IntrinsicHeight( <---------------- just add this widget
child:Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
SizedBox(
height: 15,
width: 100,
child: ClipRRect(
//borderRadius: BorderRadius.only(topRight: 10,topLeft: 10),
child: Text("admistraction")),
),
SizedBox(
height: 50,
width:50
child: Divider(
thickness: 2,
color: Colors.lightBlue,
)),
Padding(
padding: EdgeInsets.only(left: 15.0, right: 5),
child: Text(
"Start Learning",
)),
],
)),
答案3
得分: 0
尝试为分隔线添加高度，它将有效。仅提供一个小示例以供参考。
用法如下：
HorizontalOrLine(height: 10, label: "OR")
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class HorizontalOrLine extends StatelessWidget {
const HorizontalOrLine({
this.label,
this.height,
});
final String label;
final double height;
@override
Widget build(BuildContext context) {
return Row(children: <Widget>[
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 10.0, right: 15.0),
child: Divider(
color: Colors.black,
height: height,
)),
),
Text(label),
Expanded(
child: new Container(
margin: const EdgeInsets only(left: 15.0, right: 10.0),
child: Divider(
color: Colors.black,
height: height,
)),
),
]);
}
}
英文:
Try to Add Height to Divider it will work.
Just adding a small sample for reference.
The usage will be:
HorizontalOrLine(height: 10,label: "OR")
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class HorizontalOrLine extends StatelessWidget {
const HorizontalOrLine({
this.label,
this.height,
});
final String label;
final double height;
@override
Widget build(BuildContext context) {
return Row(children: <Widget>[
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 10.0, right: 15.0),
child: Divider(
color: Colors.black,
height: height,
)),
),
Text(label),
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 15.0, right: 10.0),
child: Divider(
color: Colors.black,
height: height,
)),
),
]);
}
}
答案4
得分: 0
尝试像这样为您的分隔符添加宽度：
SizedBox(
width: 100,
child: Divider(
thickness: 2,
color: Colors.lightBlue,
),
)
英文:
SizedBox(
width: 100,
child: Divider(
thickness: 2,
color: Colors.lightBlue,
),
),
Try adding width to your divider like this
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论