当我使用Transform.Rotate将水平ListView设置为对角线时,如下所示,它变为对角线,但左右边缘被截断.
有没有一种方法可以在不裁剪左右边缘的情况下显示,或者有没有小工具可以用来实现这一点?
我想出了一种方法,使用Stack小部件用渐变条覆盖左侧和右侧边缘,并使它们不可见. 我确实试过了,很好,但我想我应该问问有没有其他方法.
我认为这是因为屏幕宽度是作为约束从父级传递的,但有什么方法可以禁用该约束吗? 谢谢.
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.greenAccent,
body: Column(
children: [
Expanded(
child: Center(
child: SizedBox(
width: double.infinity,
height: 200.0,
child: Transform.rotate(
angle: -math.pi / 20,
child: Container(
color: Colors.white,
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 6,
itemBuilder: (context, innerIndex) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
//padding: EdgeInsets.all(4.0),
height: 50.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color:
Colors.red.withOpacity(1.0 - 0.1 * innerIndex),
),
child:Center(child:Text(innerIndex.toString()),),
),
),
),
),
),
),
),
),
Container(
height:100.0,
color: Colors.white,
child:Center(
child:Text('title'),
),
)
],
),
);
}
}