我有一些问题与CheckboxListTile
.我用它与SizedBox -> Container -> Scrollbar -> ListView.builder -> _SingleTile -> CheckboxListTile
,tileColor
的这个CheckboxListTile
覆盖风格,这是开箱即用和滚动区.我准备一些例子:
import 'package:flutter/material.dart';
/// Flutter code sample for [CheckboxListTile].
void main() => runApp(const CheckboxListTileApp());
class CheckboxListTileApp extends StatelessWidget {
const CheckboxListTileApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const CheckboxListTileExample(),
);
}
}
class CheckboxListTileExample extends StatefulWidget {
const CheckboxListTileExample({super.key});
@override
State<CheckboxListTileExample> createState() =>
_CheckboxListTileExampleState();
}
class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
final _scrollController = ScrollController();
List<String> fruits = ["apple", "pear", "strawberry", "apple1", "pear1", "strawberry1"];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('CheckboxListTile Sample')),
body: Column(
children: [
const TextField(
decoration: InputDecoration(
labelText: 'label text',
labelStyle: TextStyle(fontSize: 25),
hintText: 'hint text',
),
),
const SizedBox(height: 10),
SizedBox(
height: 200,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.fromBorderSide(
BorderSide(color: Colors.grey.shade200, width: 2),
),
),
child: Scrollbar(
controller: _scrollController,
thumbVisibility: true,
thickness: 4,
radius: const Radius.circular(10.0),
child: ListView.builder(
reverse: false,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return _SingleTile(item: fruits[index], index: index);
},
itemCount: fruits.length,
controller: _scrollController,
),
),
),
),
],
),
);
}
}
class _SingleTile extends StatefulWidget {
const _SingleTile({super.key, required this.item, required this.index});
final String item;
final int index;
@override
State<_SingleTile> createState() => _SingleTileState();
}
class _SingleTileState extends State<_SingleTile> {
@override
Widget build(BuildContext context) {
return CheckboxListTile(
title: Text(widget.item),
tileColor: widget.index % 2 == 0 ? Colors.white : Colors.grey[100],
value: false,
onChanged: (bool? value) {},
);
}
}
字符串
我希望你可以很容易地在dartpad作为flutter项目运行这个。
1条答案
按热度按时间vwkv1x7d1#
您可以通过将
ListView
Package 在Material
中来解决这个问题,如字符串