flutter 列表在抖动不能去满底

wlp8pajw  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(111)

假设我在Flutter中有以下代码:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ));
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    final items = List<String>.generate(10000, (i) => 'Item $i');
    return Scaffold(
      // appBar: PreferredSize(
      //   preferredSize: const Size.fromHeight(kToolbarHeight),
      //   child: SafeArea(
      //     child: AppBar(
      //     ),
      //   ),
      // ),
      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: NetworkImage('https://i.pinimg.com/564x/3e/a9/ba/3ea9ba9e84ab6808a394b6aa165c1673.jpg'),
              fit: BoxFit.fill),
        ),
        child: SafeArea(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.white,
                  child: Text(
                    items[index],
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

输出如下所示:

我怎样才能实现列表中的项目占据底部的区域?我这样问是因为父容器已经有了一个背景图像,它已经占据了这个区域。

qgelzfjb

qgelzfjb1#

试试这个
top: true将safeArea保持在顶部。bottom:false将从底部移除safeArea部分,以便您可以使用该空间。

child: SafeArea(
      top: true,
      bottom: false,

相关问题