英文:
How to create List inside the specific area of screen in flutter
问题
我是Flutter开发的新手，我在尝试在屏幕的头部和尾部区域创建一个可滚动的列表时遇到了问题。头部和尾部的数据将保持固定，而列表将可滚动。我已经包含了我想要实现的设计的示例图像：
屏幕标题将保持固定，然后在屏幕顶部会显示文本1、2、3和4。
之后将有一个可滚动的列表，可以包含任意数量的数据。
最后，有一个用于显示一些文本的页脚区域，也将固定在屏幕底部。
提前感谢。
英文:
I am new to Flutter development and I am having trouble creating a scrollable list within the header and footer area of the screen. The header and footer data will be fixed, while the list will be scrollable. I have included a sample image of the design I am trying to achieve:
The screen title will be fixed, followed by Text 1, 2, 3 and 4 on top of the screen.
After that there will be a scrollable list which can contain any number of data.
Finally, there is a footer area for some text that will also be fixed at the bottom of the screen.
Thanks in advance.
答案1
得分: 1
以下是给定设计的代码参考：
import 'package:flutter/material.dart';
class ScreenDesign extends StatefulWidget {
const ScreenDesign({Key? key}) : super(key: key);
@override
State<ScreenDesign> createState() => _ScreenDesignState();
}
class _ScreenDesignState extends State<ScreenDesign> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
'Tittle',
),
),
body: Column(children: [
_headerWidgets(),
_listViewWidget([
'List Item 1',
'List Item 2',
'List Item 3',
'List Item 4',
'List Item 5',
'List Item 6',
'List Item 7',
'List Item 8',
'List Item 9',
'List Item 10',
'List Item 11',
'List Item 12',
'List Item 13',
'List Item 14',
'List Item 15',
]),
_footerWidgets()
]),
);
}
Widget _headerWidgets() {
return const Expanded(
child: Column(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 1'),
Text('Text 2'),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 3'),
Text('Text 4'),
],
),
),
],
),
);
}
Widget _listViewWidget(List<String> dataList) {
return Expanded(
flex: 6,
child: ListView.builder(
shrinkWrap: true,
itemCount: dataList.length,
itemBuilder: (context, index) => ListTile(
title: Text(dataList[index]),
)),
);
}
Widget _footerWidgets() {
return const Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 5'),
Text('Text 6'),
Text('Text 7'),
],
),
);
}
}
如果您想要更改头部、底部或 listView 的大小，您可以在包装 listView 的 expanded widget 中添加 flex，就像我在代码中所示。
如果您希望底部停留在屏幕底部，而 listView 数据滚动到底部，则只需从 Scaffold 的 bottomSheet 属性返回 _footerWidgets。
英文:
you can refer to the below code for the given design:
import 'package:flutter/material.dart';
class ScreenDesign extends StatefulWidget {
const ScreenDesign({Key? key}) : super(key: key);
@override
State<ScreenDesign> createState() => _ScreenDesignState();
}
class _ScreenDesignState extends State<ScreenDesign> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
'Tittle',
),
),
body: Column(children: [
_headerWidgets(),
_listViewWidget([
'List Item 1',
'List Item 2',
'List Item 3',
'List Item 4',
'List Item 5',
'List Item 6',
'List Item 7',
'List Item 8',
'List Item 9',
'List Item 10',
'List Item 11',
'List Item 12',
'List Item 13',
'List Item 14',
'List Item 15',
]),
_footerWidgets()
]),
);
}
Widget _headerWidgets() {
return const Expanded(
child: Column(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 1'),
Text('Text 2'),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 3'),
Text('Text 4'),
],
),
),
],
),
);
}
Widget _listViewWidget(List<String> dataList) {
return Expanded(
flex: 6,
child: ListView.builder(
shrinkWrap: true,
itemCount: dataList.length,
itemBuilder: (context, index) => ListTile(
title: Text(dataList[index]),
)),
);
}
Widget _footerWidgets() {
return const Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 5'),
Text('Text 6'),
Text('Text 7'),
],
),
);
}
}
Here if you want to change the size of header, footer or listView you can add flex in the expanded widget as i have given to expended widget wrapping the listView.
And if you want the footer to stay in the bottom of the screen and listView data to go behind the footer then you just need to return the _footerWidgets from the scaffold property called bottomSheet.
答案2
得分: 1
尝试以下代码，希望对你有帮助。
以下是我在下面的代码中使用的一些小部件 - Expanded、Column、Row、基本小部件
class ListPage extends StatelessWidget {
const ListPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
List dataList = [
'List Item 1',
'List Item 2',
'List Item 3',
'List Item 4',
'List Item 5',
'List Item 6',
'List Item 7',
'List Item 8',
'List Item 9',
'List Item 10',
];
return Scaffold(
appBar: AppBar(
title: const Text('屏幕标题'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Container(
color: Colors.yellow.shade300,
child: const Column(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('文本1'),
Text('文本2'),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('文本3'),
Text('文本4'),
],
),
),
],
),
),
),
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: dataList.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black),
),
child: ListTile(
title: Text(
dataList[index],
textAlign: TextAlign.center,
),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.orange.shade300,
child: const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('文本5'),
Text('文本6'),
Text('文本7'),
],
),
),
)
],
),
);
}
}
结果屏幕 - 
英文:
Try below code hope its help to you.
Refer Widgets someI have used in below code - Expanded, Column, Row, basics widgets
class ListPage extends StatelessWidget {
const ListPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
List dataList = [
'List Item 1',
'List Item 2',
'List Item 3',
'List Item 4',
'List Item 5',
'List Item 6',
'List Item 7',
'List Item 8',
'List Item 9',
'List Item 10',
];
return Scaffold(
appBar: AppBar(
title: const Text('Screen Title'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Container(
color: Colors.yellow.shade300,
child: const Column(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 1'),
Text('Text 2'),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 3'),
Text('Text 4'),
],
),
),
],
),
),
),
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: dataList.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black)),
child: ListTile(
title: Text(
dataList[index],
textAlign: TextAlign.center,
),
),
)),
),
),
Expanded(
child: Container(
color: Colors.orange.shade300,
child: const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Text 5'),
Text('Text 6'),
Text('Text 7'),
],
),
),
)
],
),
);
}
}
Result Screen->
答案3
得分: 1
以下是您要翻译的代码部分：
你可以尝试这个解决方案
它很基本，但你可以按照你的需求进行自定义
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Title"),
backgroundColor: Colors.blueAccent,
toolbarHeight: MediaQuery.of(context).size.height * .075,
),
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .2,
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text1"),
Text("Text2"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text3"),
Text("Text4"),
],
),
],
),
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .475,
decoration: BoxDecoration(color: Colors.grey),
child: ListView.builder(
itemCount: 10,
physics: const ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 15,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .75,
height: 70,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
child: Text(
"List view item ${index + 1}",
style: TextStyle(
fontSize: 20,
),
textAlign: TextAlign.center,
),
)),
const SizedBox(
height: 15,
),
],
);
})),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .15,
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text1"),
Text("Text2"),
Text("Text3"),
],
),
),
],
),
);
}
}
希望这对您有所帮助！如果您有任何其他问题，请随时提出。
英文:
You can try this solution
its basic but you can customize it the way you want
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Title"),
backgroundColor: Colors.blueAccent,
toolbarHeight: MediaQuery.of(context).size.height * .075,
),
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .2,
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text1"),
Text("Text2"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text3"),
Text("Text4"),
],
),
],
),
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .475,
decoration: BoxDecoration(color: Colors.grey),
child: ListView.builder(
itemCount: 10,
physics: const ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 15,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .75,
height: 70,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
child: Text(
"List view item ${index + 1}",
style: TextStyle(
fontSize: 20,
),
textAlign: TextAlign.center,
),
)),
const SizedBox(
height: 15,
),
],
);
})),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * .15,
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Text1"),
Text("Text2"),
Text("Text3"),
],
),
),
],
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论