滾動時小部件溢位容器

我在 Container 中有一個小串列，它可以正常作業，但它的邊緣在向上或向下滾動時往往會溢位父容器。我想知道我能做些什么來防止這些人做同樣的事情。在我看來，問題可能出在grocery.dart課堂上，我在課堂上用評論標記了這一點main_screen.dart。圖中紅色標記的區域是我的意思：

我的代碼如下：

main_screen.dart

class MainScreen extends StatefulWidget {
  MainScreenState createState() => MainScreenState();
}

class MainScreenState extends State<MainScreen> {

 @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
   Provider.of<DataModel>(context).fetchData();
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
   final provider = Provider.of<DataModel>(context).list;
    // TODO: implement build
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          color: Colors.lightBlue
        ),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              padding: EdgeInsets.all(5),
              width: double.infinity,
              height: 350,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(30),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black87,
                        offset: Offset.zero,
                        blurRadius: 10,
                        spreadRadius: 5
                    )
                  ]
              ),
              child: ListView.builder(
                  itemBuilder: (context, index) => Grocery(    //grocery.dart
                    provider[index].id,
                    provider[index].name
                  ),
                  itemCount: provider.length
              ),
            ),
          ),
        ),
      )
    );
  }
}

我嘗試從 double.infinity 手動調整寬度，但盡管注釋掉了整個 width 屬性，但這也不起作用。雜貨店.dart

import 'package:flutter/material.dart';

class Grocery extends StatelessWidget {
  final String id;
  final String name;

  Grocery(this.id, this.name);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
//      width: 100,
      height: 50,
      margin: EdgeInsets.only(bottom: 20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(30),
        boxShadow: [
          BoxShadow(
            color: Colors.black45,
            offset: Offset.zero,
            blurRadius: 5,
            spreadRadius: 2
          )
        ]
      ),
      child: Center(child: Text('$name')),
    );
  }
}

uj5u.com熱心網友回復：

底部和頂部填充的數量不足以讓 Flutter 平滑地渲染容器中的專案。容器的 BorderRadius 遠大于 padding。您可以像這樣調整容器的填充屬性，使其更平滑；

    class MainScreen extends StatefulWidget {
  MainScreenState createState() => MainScreenState();
}

class MainScreenState extends State<MainScreen> {

 @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
   Provider.of<DataModel>(context).fetchData();
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
   final provider = Provider.of<DataModel>(context).list;
    // TODO: implement build
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          color: Colors.lightBlue
        ),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              padding: EdgeInsets.only(left: 5, right: 5, top: 15, bottom: 15)
              width: double.infinity,
              height: 350,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(30),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black87,
                        offset: Offset.zero,
                        blurRadius: 10,
                        spreadRadius: 5
                    )
                  ]
              ),
              child: ListView.builder(
                  itemBuilder: (context, index) => Grocery(    //grocery.dart
                    provider[index].id,
                    provider[index].name
                  ),
                  itemCount: provider.length
              ),
            ),
          ),
        ),
      )
    );
  }
}

標籤：扑

上一篇：Flutter，嘗試檢查商品是否已添加到用戶的購物車中，但該功能僅發生

下一篇：如何啟用'constructor-tearoffs'功能？