我正在开发一个Flutter应用程序,在那里,我正在动态生成checkboxes
的列表。为此,我使用了ListView.Builder
。
下面是我的完整代码,您可以在最后轻松实现它。
import 'package:flutter/material.dart';
class AddAccountPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Services"),
actions: <Widget>[
FlatButton(
child: Text(
"Save",
style: Theme.of(context).textTheme.button,
),
onPressed: () {},
)
],
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Container(
child: _AddAccountUI(),
),
)),
);
}
}
class _AddAccountUI extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _AddAccountState();
}
}
class _AddAccountState extends State<_AddAccountUI> {
List<int> checkBoxElements = [];
List<String> checkBoxStrings =['one','two','three','four'];
bool _onTheSpotServices=false;
bool _homeVisits=false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: Text(
"Let's add your company into the system. Just fill out the form below.",
style: Theme.of(context).textTheme.subtitle,
),
),
_imageSelector(),
Container(
margin: EdgeInsets.all(20),
child: Text(
"Company Name",
style: Theme.of(context).textTheme.body1,
),
),
Container(
margin: EdgeInsets.only(top: 5, left: 15),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20),
child: Text(
"Business Type",
style: Theme.of(context).textTheme.body1,
),
),
Container(
margin: EdgeInsets.only(top: 10, left: 20),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: DropdownButton<String>(
hint: Text(
"Please Select",
style: Theme.of(context).textTheme.body1,
),
items:
<String>['Foo000000000', 'Bar00000000'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(
value,
style: Theme.of(context).textTheme.body1,
),
);
}).toList(),
onChanged: (_) {},
),
),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20, bottom: 10),
child: Text(
"Category",
style: Theme.of(context).textTheme.body1,
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 15),
child: ListView.builder(
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return _TickBox(checkBoxElements, index);
})),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20, bottom: 20),
child: Text(
"Location",
style: Theme.of(context).textTheme.body1,
),
),
Container(
margin: EdgeInsets.only(top: 5, left: 15),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
),
),
Container(child: _switchMaker(),),
SizedBox(
height: 50,
)
],
);
}
Widget _imageSelector() {
return GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color.fromRGBO(212, 208, 208, 100),
),
color: Color.fromRGBO(242, 242, 242, 100),
),
width: double.infinity,
height: MediaQuery.of(context).size.height * .3,
child: Center(child: Text("Add Your Cover Photo")),
));
}
Widget _switchMaker() {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20, left:20),
child: Text(
"Provide on the spot services",
style: Theme.of(context).textTheme.body1,
),
),
Spacer(flex: 1,),
Container(margin: EdgeInsets.only(top:20, right: 20),
child: Text(
"Make Home Visits",
style: Theme.of(context).textTheme.body1,
),
)
],
),
Row(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10, left: 20),
child: Switch(value: _onTheSpotServices, onChanged: (bool value) {
setState(() {
_onTheSpotServices=value;
});
}, )),
Spacer(flex: 1,),
Container(
margin: EdgeInsets.only(top:10, right:20),
child: Switch(value: _homeVisits, onChanged: (bool value) {
setState(() {
_homeVisits=value;
});
}, )),
],)
],
);
}
}
class _TickBox extends StatefulWidget {
List<int> checkBoxElements = [];
int dataValue = 0;
_TickBox(List<int> elements, int value) {
checkBoxElements = elements;
dataValue = value;
}
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _TickBoxState();
}
}
class _TickBoxState extends State<_TickBox> {
bool value = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: CheckboxListTile(
title: Text(
"Garage shop with general repair",
style: Theme.of(context).textTheme.body1,
),
onChanged: (bool val) {
setState(() {
value = val;
if (widget.checkBoxElements.contains(widget.dataValue)) {
widget.checkBoxElements.remove(widget.dataValue);
} else {
widget.checkBoxElements.add(widget.dataValue);
}
print(widget.checkBoxElements);
});
},
value: value,
controlAffinity: ListTileControlAffinity.leading,
),
);
}
}
现在的问题是,由ListView.Builder
生成的项目已被完全压缩,只有一项可见。要查看其余内容,您必须滚动。
我尝试使用physics: const NeverScrollableScrollPhysics()
和shrinkWrap:false
停止滚动。它确实起作用,但是项目仍然压缩。
这就是它的外观。要选中复选框,请查看Category
下的内容我需要这些项目完整显示而不滚动。我该怎么做?
您需要删除Expanded
小部件并在ListView.builder
中添加以下属性: