简单的可扩展列表使底部溢出 x 像素

Question

I created a nice simple expandable list. It should work like a radio list, you should be able to pick just one element. I did not implement this part yet, because I'm having a problem with the size of the list:

class ExpandableListRadio extends StatefulWidget {
  ExpandableListRadio({
    Key key,
    this.options,
    this.expandedHeight,
    this.listName,
    this.expanded,
  }) : super(key: key);
  List<String> options;
  String listName;
  double expandedHeight;
  bool expanded;
  @override
  _ExpandableLisRadioState createState() => _ExpandableLisRadioState();
}

class _ExpandableLisRadioState extends State<ExpandableListRadio> {
  List<Widget> buildListChildren() {
    List<Widget> l = new List<Widget>();
    for (var i = 0; i < widget.options.length; i++) {
      Widget w = Container(
          //width: double.infinity,
          //height: 30,
          margin: const EdgeInsets.only(left: 3, right: 3, top: 2),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(widget.options[i],
                  style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w700,
                      fontFamily: 'Roboto',
                      color: Colors.white)),
              ClipOval(
                child: Container(color: Colors.grey, width: 15, height: 15),
              )
            ],
          ));
      l.add(w);
    }
    return l;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => {
              setState(() {
                if (widget.expanded != null)
                  widget.expanded = !widget.expanded;
                else
                  widget.expanded = false;
              })
            },
            child: Container(
              height: 20,
              decoration: BoxDecoration(
                  color: Colors.grey, borderRadius: BorderRadius.circular(2)),
              child: Container(
                  margin: const EdgeInsets.only(left: 5, right: 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(widget.listName,
                          style: TextStyle(
                            color: Color(0xFF555555),
                            fontSize: 13,
                            fontWeight: FontWeight.w700,
                            fontFamily: 'Roboto',
                          )),
                      widget.expanded != null && widget.expanded
                          ? Icon(
                              Icons.arrow_upward,
                              size: 14,
                              color: Color(0xFF555555),
                            )
                          : Icon(
                              Icons.arrow_downward,
                              size: 14,
                              color: Color(0xFF555555),
                            )
                    ],
                  )),
            ),
          ),
          widget.expanded != null && widget.expanded
              ? (Container(
                  height: widget.expandedHeight,
                  color: Colors.transparent,
                  child: Column(children: [
                    ListView(
                      shrinkWrap: true,
                      children: buildListChildren(),
                    ),
                  ]),
                ))
              : Container()
        ],
      ),
    );
  }
}

If the ExpandableListRadio height is less than the ListView , I get a bottom overflowed by x pixels . I made sure to add shirnkwrap: true to my ListView so this wouldn't happen, but it's still happening.

Answer 1

I would use SingleChildScrollView instead in this scenario. The code for the last part:

widget.expanded != null && widget.expanded
              ? (SingleChildScrollView(
                  child: Column(children: [
                   buildListChildren(),
                  ]),
                ))
              : Container()