如何在SliverChildBuilderDelegate中填充容器之间的距离

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

我正在我的应用程序中使用SliverAppBar,它运行正常,但问题出在容器列表中,列表之间的距离没有增加

[<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9pbHRJby5wbmcifQ==” alt =“在此处输入图像描述”>

我的代码

import 'package:flutter/material.dart';

class ClaimsScreen extends StatefulWidget {
  @override
  _ClaimsScreenState createState() => _ClaimsScreenState();
}

class _ClaimsScreenState extends State<ClaimsScreen> {
  final List _claims = [
    {
      'av': '27,000',
      'cv': '25,000',
      'cqno': '3442121',
      'status': 'CLAIM PAYMENT PRCESSED',
      'cno': '00651211',
    },
    {
      'av': '29,000',
      'cv': '25,000',
      'cqno': '3442121',
      'status': 'CLAIM PAYMENT PRCESSED',
      'cno': '00651211',
    },
  ];
  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Expanded(
      child: Container(
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: <Widget>[
            new SliverAppBar(
              backgroundColor: Colors.white,
              expandedHeight: statusBarHeight * 5,
              flexibleSpace: new FlexibleSpaceBar(
                title: const Text(
                  'Claims',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                      fontSize: 20,
                      color: Color(0xff00AEF0),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new SliverPadding(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                sliver: new SliverFixedExtentList(
                  itemExtent: 150.0,
                  delegate: new SliverChildBuilderDelegate(
                      (builder, index) => BenefitList(index),
                      childCount: _claims.length),
                )),
          ],
        ),
      ),
    );
  }

  Widget BenefitList(int index) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Container(
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        elevation: 30,
        child: Container(
          child: Padding(
            padding: const EdgeInsets.only(right: 10, left: 10, top: 10),
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      'Approved Value : ',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      _claims[index]['av'],
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
                    ),
                  ],
                ),
                SizedBox(height: height* 0.005,),
                Row(
                  children: <Widget>[
                    Text(
                      'Claim Value : ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      _claims[index]['cv'],
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
                    ),
                  ],
                ),
                SizedBox(height: height* 0.005,),

                Row(
                  children: <Widget>[
                    Text(
                      'Claim No : ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      _claims[index]['cno'],
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
                    ),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text(
                      'Cheque Number : ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      _claims[index]['cqno'],
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
                    ),
                  ],
                ),
                SizedBox(height: height* 0.005,),

                Row(
                  children: <Widget>[
                    Text(
                      'Status : ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      _claims[index]['status'],
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果itemExtent,我尝试增加数字,但这只是增加卡的高度而没有增加间隙。我只需要在每张卡之间添加一些间隙,所以当它们增加时,它们会自动显示它们之间的间隙。另外,我尝试在Container中添加保证金,但它也无法正常工作>>

我正在我的应用程序中使用SliverAppBar,它运行正常,但问题出在容器列表中,列表之间的间隔没有增加[我的代码导入'package:flutter / material.dart'; class ClaimsScreen ...

flutter
2个回答
0
投票

默认情况下,SliverFixedExtentList的项目之间没有空格。考虑改用SliverList。仅供参考,new


0
投票

您可以在下面复制粘贴运行完整代码您可以使用PaddingEdgeInsets.only(top: 30)

© www.soinside.com 2019 - 2024. All rights reserved.