如果页面列表中的页面混乱,则该页面应显示数据。当用户滑动记录时,它将显示有关数据的更多详细信息。完美配合可滑动和IconSlide动作。当数据随着屏幕变大时,我的问题开始了。如果我什么都不做,我的右边界将出现溢出(黄色/黑色条纹)。
所以我的想法是拥有SingleChildScrollView。因此,用户向右滑动并显示数据,并且在数据旁边将显示详细信息操作的按钮。
我从下面的源代码中得到了什么。如果数据适合屏幕显示,则可滑动功能有效。该按钮正确显示。当数据超过屏幕大小时,用户可以滑动并显示数据。但是,该按钮不会出现。
有人知道如何解决这个问题吗?
此示例具有相同的行为。在某行上,“详细信息”图标消失了。
将flutter_slidable:“ ^ 0.4.9”添加为pub spec.yaml中的依赖项
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
List<int> fakeData = List();
void main() async {
for (int i=0 ; i < 100 ; i++)
fakeData.add(i*5);
runApp( MaterialApp(
home: MyHomePage(title: "Example")
));
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text(
"Example",
style: TextStyle(color: Colors.white)
),
),
body: ListView.builder (
itemCount: 100,
itemBuilder: (BuildContext context, int index) =>
_showCard(index) // Toon logboek regel
)
);
}
// De kaart met de vlucht info
Widget _showCard(int index) {
return
Card(
elevation: 1.5,
child: _showDetails(index)
);
}
// Toon de basis informatie
Widget _showDetails(index) {
return
Slidable(
delegate: SlidableDrawerDelegate(),
direction: Axis.horizontal,
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'Details',
color: Colors.grey,
icon: Icons.more_horiz,
onTap: () =>
Navigator.push(
context,
MaterialPageRoute(
// action to be done
),
),
),
],
child: _content(index)
);
}
// hier gaat het om
Widget _content(int index) {
return
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget> [
SizedBox(
width:25,
child: CircleAvatar(
radius: 12.0,
backgroundColor: Colors.black,
child: Text(
(index+1).toString(),
style: TextStyle(fontSize: 13.0)
)
)
),
Padding (padding: EdgeInsets.all(3)),
Container(
height: 40,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_data(index)
]
)
)
]
)
);
}
Widget _data(int index) {
return
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(0.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.blueAccent)
),
child: SizedBox(width: 1.0*fakeData[index], height: 25, child: Text(fakeData[index].toString()))
);
}
}