我是 flutter mobile dev 的初学者。我正在尝试做或模仿一个 UI 工具包,但我在屏幕的列表视图部分遇到了问题。
我有一个SliverToBoxAdapter
,它的孩子是一个SizedBox
,它的孩子是ListView.builder
。问题是 SizedBox 是 ListView 的容器,如果列表视图有更多项目,高度不够灵活,无法包裹内容。
我曾尝试将 SizedBox
替换为 Wrap
或 Column
,但它只会返回一个错误,例如 Vertical viewport was given unbounded height.
以及更多类似 hasSize
的错误。
这就是它看起来喜欢的样子,我的意思是它不包裹内容,因此它自己可以滚动:(高度设置为 100,它切断到第二个项目,我需要包裹整个 listView)
这是我正在尝试做的参考屏幕:
这是屏幕代码:
import 'package:audit_finance_app/constant/temp_data.dart';
import 'package:audit_finance_app/constant/theme.dart';
import 'package:audit_finance_app/providers/states.dart';
import 'package:audit_finance_app/widgets/widgets.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
void initState() {
final statesData = Provider.of<States>(context, listen: false);
statesData.screen = 1;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
slivers: <Widget>[
Widgets().gradientAppBar(
title: const CircleAvatar(),
),
SliverList(
delegate: SliverChildListDelegate(
[
Stack(
// alignment: Alignment.center,
children: [
const Image(
image: AssetImage('assets/header_one.png'),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 70,
),
Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Widgets().sizedBoxHeight(20),
Widgets().headerTitle('Total Balance'),
Widgets().sizedBoxHeight(15),
Widgets().headerText('\$1,234.00'),
Widgets().sizedBoxHeight(10),
const Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('+ \$1,234.00'),
),
),
],
),
),
IconButton(
iconSize: 50,
color: Colors.white,
icon: const Icon(Icons.add_circle),
onPressed: () {},
),
],
),
],
),
const Text(
'LATEST TRANSACTIONS',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20),
),
],
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
height: 100,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) {
return SizedBox(
width: 130.0,
child: Card(
color: TempData.transactionColor[index],
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
TempData.transactionName[index],
style: const TextStyle(
color: Colors.white,
),
),
Widgets().sizedBoxHeight(3),
Text(
TempData.transactionValue[index],
style: const TextStyle(
fontSize: 17.5,
color: Colors.white,
),
),
const Spacer(),
Text(
TempData.transactionType[index],
style: const TextStyle(
color: Color.fromARGB(140, 0, 0, 0),
),
),
],
),
),
),
);
},
),
),
),
),
Widgets().divider(),
Widgets().transactionTitle(text: 'Payment'),
SliverToBoxAdapter(
child: SizedBox(
height: 80,
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: 1,
itemBuilder: (context, index) {
return const ListTile(
leading: Icon(
Icons.account_balance_wallet_outlined,
size: 40,
color: AuditTheme.primaryColor,
),
title: Text('Bank Account'),
subtitle: Text('NDSL RA01 203 4455 12'),
trailing: Text(
'\$30,234',
style: TextStyle(
color: AuditTheme.primaryColor,
fontWeight: FontWeight.bold,
),
),
);
},
),
),
),
Widgets().divider(),
Widgets().transactionTitle(text: 'Savings'),
SliverToBoxAdapter(
child: SizedBox(
height: 100,
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: 2,
itemBuilder: (context, index) {
return const ListTile(
leading: Icon(
Icons.account_balance_wallet_outlined,
size: 40,
color: AuditTheme.primaryColor,
),
title: Text('Saving Account'),
subtitle: Text('NDSL RA01 234 3453 7D'),
trailing: Text(
'\$30,234',
style: TextStyle(
color: AuditTheme.primaryColor,
fontWeight: FontWeight.bold,
),
),
);
},
),
),
),
],
),
);
}
}