gpt4 book ai didi

Flutter - 将背景渐变应用于可 ScrollView

转载 作者:行者123 更新时间:2023-12-02 12:18:22 29 4
gpt4 key购买 nike

有没有办法在 Flutter 中将完整的背景渐变应用于可 ScrollView (例如 ListView 或 SingleChildScrollView)?我尝试了各种方法,例如将渐变应用于 Scaffold 或将 Scaffold 包装在 Container 中,但渐变似乎只是随内容滚动,而不是应用于完整的可滚动高度。

示例:DartPad example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Container(
decoration: BoxDecoration(
gradient:LinearGradient(
begin: Alignment.topCenter,
end: FractionalOffset.bottomCenter,
colors: [Colors.green, Colors.orange],
stops: [0, 1],
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: ListView.builder(
itemCount: 500,
itemBuilder: (_, index) => Text('$index'),
),
),
),
),
);
}
}

最佳答案

工作正常!使用 dartpad 进行测试!

如果有效,请接受答案!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: FractionalOffset.bottomCenter,
colors: [Colors.green, Colors.orange],
stops: [0, 1],
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(500, (ind) {
return ListTile(
title: Text('$ind'),
);
}).toList(),
),
),
),
),
);
}
}

关于Flutter - 将背景渐变应用于可 ScrollView ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59568948/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com