Если есть флаттер с представлением списка, в котором должны отображаться данные. Когда пользователь перемещает запись, он должен показать больше деталей о данных. Это прекрасно работает с возможностью скольжения и IconSlide. Моя проблема начинается, когда данные больше, чем на экране. Если я ничего не делаю, я получу переполнение (желтые / черные полосы) на правой границе.
Поэтому я подумал, что у вас есть SingleChildScrollView. Таким образом, пользователь перемещается влево, и данные отображаются, а рядом с данными будет представлена кнопка для действия «Подробности».
Что я получил с исходным кодом ниже. Slidable работает, если данные помещаются на экране. Кнопка отображается правильно. Когда данные превышают размер экрана, пользователь может скользить, и данные отображаются. Однако кнопка не появится.
Кто-нибудь знает, как решить эту проблему?
Этот пример имеет такое же поведение. В определенном ряду значки DETAILS исчезли.
добавить flutter_slidable: "^ 0.4.9" в качестве зависимости в спецификации паба. 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()))
);
}
}