Dart 包含固定Listview的Listview
我想基本上做一个设置屏幕。实际上,我的屏幕看起来像是由一个标题和一个不可滚动的列表视图组成的设置部分。我想把这些部分放在一个列表视图中,使屏幕可滚动,并使每个设置部分紧跟在最后一个设置部分之后 这是我的真实屏幕 这是我的密码Dart 包含固定Listview的Listview,dart,flutter,Dart,Flutter,我想基本上做一个设置屏幕。实际上,我的屏幕看起来像是由一个标题和一个不可滚动的列表视图组成的设置部分。我想把这些部分放在一个列表视图中,使屏幕可滚动,并使每个设置部分紧跟在最后一个设置部分之后 这是我的真实屏幕 这是我的密码 Widget build(BuildContext context) { return Container( child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlig
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
])),
Expanded(
child: SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]))
],
));
小部件构建(构建上下文){
返回容器(
子:列(
crossAxisAlignment:crossAxisAlignment.start,
mainAxisAlignment:mainAxisAlignment.start,
mainAxisSize:mainAxisSize.min,
儿童:[
扩大(
子项:设置部分(“通信”[
设置邮箱('Email','Switch',()=>(打印('Function:))),
SettingsPayload('通知','开关'),
])),
扩大(
child:SettingSection('Hello'[
SettingsPayload('Email','Normal',()=>print('value'),
图标。箭头(前进方向),
SettingsPayload('Notifications','Normal',()=>print('hello'),
]))
],
));
如何建立每个列表
buildlistSettings() {
return ListView.builder(
physics: ScrollPhysics(parent: NeverScrollableScrollPhysics()),
padding: const EdgeInsets.all(15.0),
itemBuilder: (context, i) {
if (i < widget.listSettings.length) {
return Column(
children: <Widget>[
buildTileSettings(widget.listSettings[i]),
Divider(),
],
);
}
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left : 10.0),
height: 25.0,
decoration:
BoxDecoration(color: Color.fromRGBO(223, 230, 233, 0.5), border: Border(bottom: BorderSide(color: Color.fromRGBO(223, 230, 233, 0.5), width: 1.0))),
child: Row(children: <Widget>[Text(
widget.title,
style: TextStyle(fontSize: 15.0, color: Colors.blueGrey),
)])),
Expanded(child: buildlistSettings()),
],
),
);
}
}
buildlistSettings(){
返回ListView.builder(
物理:ScrollPhysics(父项:NeverScrollableScrollPhysics()),
填充:常数边集全部(15.0),
itemBuilder:(上下文,i){
if(i
我认为这里有一系列问题,不仅仅是试图将列表视图
放在列表视图
中(并且必须关闭滚动),而是主要是使用扩展的
来填充相关方向上的所有空间,而是放在另一个容器中,它本身是无限的
我会在根目录下使用列表视图
,然后使用简单的列
、列表块
和分隔符
小部件构建子项。下面是一个工作示例(复制数据以确保有足够的数据进行滚动):
导入“包装:颤振/材料.省道”;
void main()=>runApp(新的MyApp());
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回新材料PP(
标题:“颤振演示”,
主页:新MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
最后的字符串标题;
MyHomePage({Key,this.title}):超级(Key:Key);
@凌驾
_MyHomePageState createState()=>new_MyHomePageState();
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建(构建上下文){
归还新脚手架(
appBar:新的appBar(
标题:新文本(widget.title),
),
正文:ListView(
儿童:[
设置部分(“通信”[
设置邮箱('Email','Switch',()=>(打印('Function:))),
SettingsPayload('通知','开关'),
]),
SettingSection('Hello'[
SettingsPayload('Email','Normal',()=>print('value'),
图标。箭头(前进方向),
SettingsPayload('Notifications','Normal',()=>print('hello'),
]),
设置部分(“通信”[
设置邮箱('Email','Switch',()=>(打印('Function:))),
SettingsPayload('通知','开关'),
]),
SettingSection('Hello'[
SettingsPayload('Email','Normal',()=>print('value'),
图标。箭头(前进方向),
SettingsPayload('Notifications','Normal',()=>print('hello'),
]),
],
),
);
}
}
类设置部分扩展了无状态小部件{
最后的字符串标题;
最终有效载荷清单;
设置部分(this.title,this.payload);
@凌驾
小部件构建(构建上下文){
返回容器(
子:列(
crossAxisAlignment:crossAxisAlignment.stretch,
mainAxisSize:mainAxisSize.min,
儿童:[
容器(
填充:仅限边缘设置(左:10.0),
身高:25.0,
装饰:盒子装饰(
颜色:颜色。来自RGBO(2232302330.5),
边界:边界(
底部:边界侧(
颜色:颜色。来自RGBO(2232302330.5),
宽度:1.0),,
子对象:行(子对象:[
正文(
这个名字,
样式:TextStyle(字体大小:15.0,颜色:Colors.blueGrey),
)
])),
_buildListSettings(上下文),
],
),
);
}
小部件\u buildListSettings(BuildContext上下文){
列表项=列表();
for(此.payload中的var设置){
//TODO:在此处添加逻辑以确定小部件的设置类型
//基于有效负载创建。
items.add(ListTile)(
标题:文本(设置.标题),
尾随:图标(setting.Icon),
));
添加(分隔符());
}
返回列(子项:项目);
}
}
类设置类加载{
最后一串山雀
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: ListView(
children: <Widget>[
SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
]),
SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]),
SettingSection('Communication', [
SettingsPayload('Email', 'Switch', () => (print('Function :)'))),
SettingsPayload('Notifications', 'Switch'),
]),
SettingSection('Hello', [
SettingsPayload('Email', 'Normal', () => print('value'),
Icons.arrow_forward_ios),
SettingsPayload('Notifications', 'Normal', () => print('hello')),
]),
],
),
);
}
}
class SettingSection extends StatelessWidget {
final String title;
final List<SettingsPayload> payload;
SettingSection(this.title, this.payload);
@override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
height: 25.0,
decoration: BoxDecoration(
color: Color.fromRGBO(223, 230, 233, 0.5),
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(223, 230, 233, 0.5),
width: 1.0))),
child: Row(children: <Widget>[
Text(
this.title,
style: TextStyle(fontSize: 15.0, color: Colors.blueGrey),
)
])),
_buildListSettings(context),
],
),
);
}
Widget _buildListSettings(BuildContext context) {
List<Widget> items = List<Widget>();
for (var setting in this.payload) {
// TODO: Add logic here to determine what kind of setting widget to
// create based on the payload.
items.add(ListTile(
title: Text(setting.title),
trailing: Icon(setting.icon),
));
items.add(Divider());
}
return Column(children: items);
}
}
class SettingsPayload {
final String title;
final String type;
final Function handler;
final IconData icon;
SettingsPayload(this.title, this.type, [this.handler, this.icon]);
}