我目前在嘗試修復此應用程式螢屏上的水平滾動時遇到了另一個問題。
當前代碼 quiz.dart
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column(
children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(
fontSize: 20.0,
)),
))),
Visibility(
// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(
fontSize: 17.0,
)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(
fontSize: 15.0,
)),
],
),
)),
),
),
),
Container(
height: constraints.maxHeight / 2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: ListView(children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
]),
)),
],
);
},
),
);
}
}
uj5u.com熱心網友回復：
如果有幫助，請接受答案
- 我添加了一個簡單的例子
- 最簡單的方法是在卡片視圖中添加您的列，然后它只會在卡片視圖中滾動，或者如果您不想使用卡片視圖
- 你必須為容器添加寬度和顏色，它會起作用
class Test1 extends StatelessWidget {
const Test1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Quiz")),
body: SizedBox(
width: double.infinity,
child: Column(
children: [
Container(
// here color and width added to container (optional: If you dont want to use card view)
width: Get.width,
// color: Colors.red,
height: 200,
child: Text("Question"),
),
Container(
// color: Colors.white,
width: Get.width,
height: 200,
child: Text("Image Box"),
),
Flexible(
child: Expanded(
child: SingleChildScrollView(
// here a card view added... it will solve your problem
child: Card(
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option E'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option F'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
],
),
),
),
),
)
],
),
),
);
}
}
[![輸出影像]
uj5u.com熱心網友回復：
我認為這將起作用，如果作業請標記為已接受..
代碼：
Widget build(BuildContext context) {
double height=MediaQuery.of(context).size.height-60.0;
double width=MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: width,
height: height/3,
child: Container(
padding: const EdgeInsets.all(10),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context,index){
return ListTile(
title: Text('Tile No ${index 1}'),
tileColor: Colors.blueGrey,
);
}),
),
),
SizedBox(
width: width,
height:height/3,
child: Container(color: Colors.white,),
),
SizedBox(
width: width,
height: height/3,
child: Container(color: Colors.yellow,),
),
],
),
);
}
輸出影像：
列場景..
Column(),//it's allow multiple Childs Vertical by default it have not scroll property.
SingleChildScrollView( child: Column(),), // now with the help of Parent Widget column can scrollable.
相同的場景適用于 Row()
Row(), //it's allow multiple Childs Horizontal by default it have not scroll
SingleChildScrollView(scrollDirection: Axis.horizontal, child:Row(),)// now with the help of Parent Widget row can scrollable in Horizontal Direction.
ListView() 的場景
ListView(),//It's allow us to assign multiple childs with scroll property vertically but we can change the scrolldirection to horizontal
現在由您決定哪個小部件可以幫助您消除底部超過 flex 的問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431654.html