我想創建一個整個列可滑動的畫布。但是我在 listview.builder 中所做的方式（下面的代碼）滾動不起作用。我該如何解決這個問題？我需要全屏滾動才能作業。
我還嘗試在串列視圖中使用 Expanded，它可以作業，但頂部文本和底部容器是固定的，我不希望這樣。
我是移動開發的新手，有點困惑哈哈哈。編碼：
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
// Expanded(
// child:
ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
);
},
),
// ),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
),
);
}
}
uj5u.com熱心網友回復：
您不需要使用 SingleChildScrollView，您可以將 ListView 用作 Toplevel 小部件。
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
children: [
Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
for (int i = 0; i < count; i )
Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
],
),
);
}
}
或者在頂部固定文本
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
);
},
),
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
);
}
}
靈活使用 listView 后，您可以將CustomScrollView用于復雜場景
uj5u.com熱心網友回復：
如果我理解你，你想要這個：
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 15),
const Text(
'text text text',
style: TextStyle(fontSize: 20),
),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
),
],
);
},
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
);
}
讓我知道這是否適合您。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508535.html