我需要添加這樣的按鈕和圖示。
I need to add multiple icons and button in List
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class settings_screen extends StatelessWidget {
const settings_screen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Settings'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
),
body: ListTile(
leading: const Icon(Icons.notifications),
title: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
onPressed: () {},
child: const Text('Reminders'),
),
),
);
}
}
我嘗試使用 ListTile 它適用于一個圖示和按鈕，但它不能多次用于其他圖示和按鈕。請幫助修復它。謝謝...
uj5u.com熱心網友回復：
創建一個串列：
List dataList = [
{
"title": "Payments",
"icon": Icons.payment,
},
{
"title": "Favorite",
"icon": Icons.favorite,
},
{
"title": "Person",
"icon": Icons.person,
},
];
您的小部件：
ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(
dataList[index]['icon'],
),
title: ElevatedButton(
onPressed: () {
print(dataList[index]);
}, style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
child: Text(
dataList[index]['title'],
),
),
);
},
),
其他解決方案：
Column(
children: [
ListTile(
leading: Icon(
Icons.payment,
),
title: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
child: Text(
'Payments',
),
),
),
ListTile(
leading: Icon(
Icons.favorite,
),
title: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
child: Text(
'Favorite',
),
),
),
ListTile(
leading: Icon(
Icons.person,
),
title: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
child: Text(
'Person',
),
),
),
],
)
結果->
uj5u.com熱心網友回復：
有兩種方法可以做你想做的事。要么建立一個 Column 并將你的按鈕/小部件放在它們里面，比如
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Settings'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
),
body: Container(
child: Column(
children: [
ListTile(
leading: const Icon(Icons.notifications),
title: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
onPressed: () {},
child: const Text('Reminders'),
),
),
ListTile(
leading: const Icon(Icons.phone_android),
title: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
onPressed: () {},
child: const Text('Reminders'),
),
),
],
),
),
);
}
或者你可以使用 listview.builder 來最小化你的代碼......就像......
class settings_screen extends StatelessWidget {
settings_screen({super.key});
List texts = [
"Reminder",
"Change App Theme",
];
List icons = [
Icons.notifications_none,
Icons.phone,
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Settings'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
),
body: Container(
child: ListView.builder(itemBuilder: (context, index) {
return ListTile(
leading: Icon(icons.elementAt(index)),
title: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff6ae792),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
onPressed: () {},
child: Text(texts.elementAt(index)),
),
);
},),
),
);
}
}```
uj5u.com熱心網友回復：
我認為您必須創建一個模型類，為您將添加的小部件設定屬性
順便說一句，在模型中，您可以為串列的每個索引設定（標題 - 圖示），如下所示：
class ListModel{
final String title;
final Widget widget;
final Icon icon;
ListModel({
required this.title,
required this.widget,
required this.icon,
});
}
然后你可以呼叫它來填充你的代碼，如下所示：
List<ListModel> testList= [
ListModel(
title: 'Add user',
widget: const AddUser(),
icon: Icon(Icons.add_reaction),
),
ListModel(
title: 'Dashboard',
widget: const Dashboard(),
icon: const Icon(Icons.dashboard),
),
ListModel(
title: 'Show subscribers',
widget: const SubscriberInfo(),
icon: Icon(Icons.slideshow),
),
];
然后使用 ListView.builder 在螢屏中找到它們，如下所示：
ListView.builder(
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemCount: testList.length,
itemBuilder: (context, index) {
return ListTile(
onTap: () => testList[index].widget,
title: Text(testList[index].title),
leading: testList[index].icon,
);
},
),
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/529318.html
標籤：扑镖颤振布局