flutter - 为什么在脚手架的背景下会出现一个巨大的灰色圆圈？

Question

我有一个PayBills()小部件屏幕=，其中有2个标签，每个标签显示我指定的单独的标签dart文件，但是在第一个dart文件的背景中出现了一个巨大的灰色圆圈，而在第二个标签中却什么也没有，但我不知道问题出在哪里。


PayBills()小部件屏幕代码:

import 'package:flutter/material.dart';
import '../../constans/constants.dart';
import 'first_tab.dart';
import 'second_tab.dart';

class PayBills extends StatefulWidget {
  @override
  _PayBillsState createState() => _PayBillsState();
}

class _PayBillsState extends State<PayBills>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          centerTitle: true,
          elevation: 0,
          title: Text(
            'تسديد فاتورة',
            style: TextStyle(
              color: leaderLogo,
              fontSize: 24,
              fontFamily: 'Calibri',
            ),
          ),
          bottom: TabBar(
            controller: _controller,
            tabs: [
              Tab(
                child: Text(
                  'فواتير مستحقة',
                  style: TextStyle(
                    fontFamily: 'Calibri',
                    fontSize: 14,
                    color: Colors.black,
                  ),
                ),
              ),
              Tab(
                child: Text(
                  'فواتير مدفوعة',
                  style: TextStyle(
                    fontFamily: 'Calibri',
                    fontSize: 14,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _controller,
          children: [
            PayBillsList(),
            SecondTab(),
          ],
        ));
  }
}

first_tab小部件代码:

import 'package:flutter/material.dart';
import '../../constans/constants.dart';

class BillDetails extends StatelessWidget {
  final String billName;
  final String billImage;
  final String billDate;

  const BillDetails({Key key, this.billName, this.billImage, this.billDate})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(
          top: 20,
          right: 5,
          left: 5,
        ),
        width: 378,
        height: 93,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
          ),
          borderRadius: BorderRadius.circular(5),
        ),
        child: ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage(billImage),
            backgroundColor: Colors.white,
          ),
          title: Text(
            billName,
            style: TextStyle(
              fontFamily: 'Calibri',
              fontSize: 16,
              color: Colors.black,
            ),
          ),
          subtitle: Text(
            billDate,
            style: TextStyle(
              fontFamily: 'Calibri',
              fontSize: 12,
              color: Colors.black,
            ),
          ),
          trailing: RaisedButton(
            color: raisedButtonColor,
            onPressed: () {},
            child: Text(
              "دفع",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ));
  }
}

class PayBillsList extends StatelessWidget {
  final List<BillDetails> billsList = [
    BillDetails(
      billName: 'فاتورة كهرباء',
      billImage: 'assets/images/electricity.png',
      billDate: '30 / 4 / 2020',
    ),
    BillDetails(
      billName: 'فاتورة مياه',
      billImage: 'assets/images/water.png',
      billDate: '30 / 4 / 2020',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 378,
      height: 93,
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: Colors.grey,
        ),
        shape: BoxShape.circle,
      ),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return BillDetails(
            billName: billsList.elementAt(index).billName,
            billImage: billsList.elementAt(index).billImage,
            billDate: billsList.elementAt(index).billDate,
          );
        },
        shrinkWrap: true,
        itemCount: billsList.length,
        scrollDirection: Axis.vertical,
      ),
    );
  }
}

class PayButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      minWidth: 20,
      height: 20,
      child: RaisedButton(
        onPressed: () {},
        color: raisedButtonColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Center(
          child: Text(
              //Login button text properties
              'دفع',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontFamily: 'Calibri',
              )),
        ),
      ),
    );
  }
}

Answer 1

您对BoxDecoration使用了圆形。评论此行:shape: BoxShape.circle,

   Container(
      width: 378,
      height: 93,
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: Colors.grey,
        ),
        // shape: BoxShape.circle,
      ),