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

Question

  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);
  }

分隔线水平线在列表视图中不可见。 我试图在行或列中包装一个分隔线我也将它包装在 Container 中但它不能正常工作它在垂直方向上工作正常但在水平方向上它不是 visisbale

Answer 1

用 SizedBox 包裹你的分隔线并给出高度和宽度

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

Answer 2

尝试将高度添加到分隔线，它会起作用。 只是添加一个小样本以供参考。

用法将是：

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

Answer 3

如果您正在使用

Column

，那么您应该用

IntrinsicHeight

包装，对于

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

Answer 4

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

试着像这样给你的分隔线增加宽度