如何设置高度以将内容包裹在 SliverToBoxAdapter 内的 sizedbox 中?

问题描述 投票:0回答:0

我是 flutter mobile dev 的初学者。我正在尝试做或模仿一个 UI 工具包,但我在屏幕的列表视图部分遇到了问题。

我有一个SliverToBoxAdapter,它的孩子是一个SizedBox,它的孩子是ListView.builder。问题是 SizedBox 是 ListView 的容器,如果列表视图有更多项目,高度不够灵活,无法包裹内容。

我曾尝试将 SizedBox 替换为 WrapColumn,但它只会返回一个错误,例如 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,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

flutter height flutter-listview flutter-sliver android-wrap-content
© www.soinside.com 2019 - 2024. All rights reserved.