flutter 分隔符在水平列表视图中不可见

gcxthw6b  于 2023-03-04  发布在  Flutter
关注(0)|答案(4)|浏览(152)
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);
  }

分隔符水平线在列表视图中不可见。我尝试在行或列中 Package 分隔符,我也在容器中 Package 它,但它不工作,它的工作与垂直,但在水平它不可见

v8wbuo2f

v8wbuo2f1#

用SizedBox Package 分隔符并给予高度和宽度

SizedBox(
                  height: 15,
                  width: 100,
                  child: Divider(
                    thickness: 2,
                    color: Colors.lightBlue,
                  ),
                ),

dnph8jn4

dnph8jn42#

尝试添加高度到分隔器,它会工作。只是添加一个小样本供参考。
使用方法为:
水平或直线(高度:10,标签:“或”)

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,
            )),
      ),
    ]);
  }
}
1cklez4t

1cklez4t3#

如果您使用的是Column,则应使用IntrinsicHeight进行 Package ,对于Row,需要使用IntrinsicWidth来显示分隔符。
在您使用Column的情况下,应该使用IntrinsicHeight
请尝试以下代码:

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",
                        )),
                  ],
                )),
t0ybt7op

t0ybt7op4#

SizedBox(
            width: 100,
            child: Divider(
            thickness: 2,
            color: Colors.lightBlue,
            ),
          ),

尝试像这样增加分隔线的宽度

相关问题