假设我在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),
),
),
);
},
),
),
),
);
}
}
输出如下所示:
我怎样才能实现列表中的项目占据底部的区域?我这样问是因为父容器已经有了一个背景图像,它已经占据了这个区域。
1条答案
按热度按时间qgelzfjb1#
试试这个
top: true
将safeArea保持在顶部。bottom:false
将从底部移除safeArea部分,以便您可以使用该空间。