英文:
Flutter circle avatar
问题
我有一个图像列表，我想将其分成两列放在一个头像圆中，其中一列占据一半的图像，另一列占据其余的图像。
我放了一个简单的代码示例，如何应用它？
还有如何处理列表的长度？
代码：
import 'package:flutter/material.dart';
class AddUserPage extends StatefulWidget {
const AddUserPage({Key? key}) : super(key: key);
@override
State<AddUserPage> createState() => _AddUserPageState();
}
class _AddUserPageState extends State<AddUserPage> {
final List<String> profiles = [
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 250,
child: ListWheelScrollView.useDelegate(
squeeze: 1.4,
itemExtent: 150,
diameterRatio: 9,
onSelectedItemChanged: (value) {},
physics: const FixedExtentScrollPhysics(),
childDelegate: ListWheelChildBuilderDelegate(
childCount: profiles.length,
builder: (context, index) => Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage(profiles[index]),
),
CircleAvatar(
radius: 50,
backgroundImage: AssetImage(profiles[index]),
),
],
),
),
),
),
],
),
),
);
}
}
英文:
I have a list of images that I want to distribute into two columns of an avatar circle, with one column taking half of the images and the other column taking the rest of the images.
I put a simple example of code how can I apply that to it?
Also how to handle the length of the list?
The code:
import 'package:flutter/material.dart';
class AddUserPage extends StatefulWidget {
const AddUserPage({Key? key}) : super(key: key);
@override
State<AddUserPage> createState() => _AddUserPageState();
}
class _AddUserPageState extends State<AddUserPage> {
final List<String> profiles = [
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 250,
child: ListWheelScrollView.useDelegate(
squeeze: 1.4,
itemExtent: 150,
diameterRatio: 9,
onSelectedItemChanged: (value) {},
physics: const FixedExtentScrollPhysics(),
childDelegate: ListWheelChildBuilderDelegate(
childCount: profiles.length,
builder: (context, index) => Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage(profiles[index]),
),
CircleAvatar(
radius: 50,
backgroundImage: AssetImage(profiles[index]),
),
],
),
),
),
),
],
),
),
);
}
}
答案1
得分: 1
以下是您提供的代码的翻译部分：
完整代码：
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const AddUserPage(),
);
}
}
class AddUserPage extends StatefulWidget {
const AddUserPage({Key? key}) : super(key: key);
@override
State<AddUserPage> createState() => _AddUserPageState();
}
class _AddUserPageState extends State<AddUserPage> {
int centeredWidgetIndex = 0;
final List<String> profiles = [
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
];
int profileIndex(int index, int loopIndex) {
if (loopIndex == 0) {
return index + index;
} else {
return index + index + 1;
}
}
int gridLength() {
return ((profiles.length / 2).ceil());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 320,
child: ListWheelScrollView.useDelegate(
squeeze: 1.2,
itemExtent: 150,
diameterRatio: 9,
offAxisFraction: 0.33,
onSelectedItemChanged: (value) {
centeredWidgetIndex = value;
setState(() {});
},
physics: const FixedExtentScrollPhysics(),
childDelegate: ListWheelChildBuilderDelegate(
childCount: gridLength(),
builder: (context, index) => Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (int i = 0; i < 2; i++) ...[
if (index == gridLength() - 1 &&
i == 1 &&
(profiles.length % 2 != 0)) ...[
CircleAvatar(
radius: index == centeredWidgetIndex ? 65 : 50,
backgroundColor: Colors.transparent,
),
] else ...[
CircleAvatar(
radius: index == centeredWidgetIndex ? 65 : 50,
child: ClipOval(
child: Image.network(
profiles[profileIndex(index, i)],
fit: BoxFit.fill,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value:
loadingProgress.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
loadingProgress
.expectedTotalBytes!
: null,
),
);
},
),
),
),
]
]
],
),
),
),
),
],
),
),
);
}
}
输出：
英文:
Full Code : -
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const AddUserPage(),
);
}
}
class AddUserPage extends StatefulWidget {
const AddUserPage({Key? key}) : super(key: key);
@override
State<AddUserPage> createState() => _AddUserPageState();
}
class _AddUserPageState extends State<AddUserPage> {
int centeredWidgetIndex = 0;
final List<String> profiles = [
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
];
int profileIndex(int index, int loopIndex) {
if (loopIndex == 0) {
return index + index;
} else {
return index + index + 1;
}
}
int gridLength() {
return ((profiles.length / 2).ceil());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 320,
child: ListWheelScrollView.useDelegate(
squeeze: 1.2,
itemExtent: 150,
diameterRatio: 9,
offAxisFraction: 0.33,
onSelectedItemChanged: (value) {
centeredWidgetIndex = value;
setState(() {});
},
physics: const FixedExtentScrollPhysics(),
childDelegate: ListWheelChildBuilderDelegate(
childCount: gridLength(),
builder: (context, index) => Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (int i = 0; i < 2; i++) ...[
if (index == gridLength() - 1 &&
i == 1 &&
(profiles.length % 2 != 0)) ...[
CircleAvatar(
radius: index == centeredWidgetIndex ? 65 : 50,
backgroundColor: Colors.transparent,
),
] else ...[
CircleAvatar(
radius: index == centeredWidgetIndex ? 65 : 50,
child: ClipOval(
child: Image.network(
profiles[profileIndex(index, i)],
fit: BoxFit.fill,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value:
loadingProgress.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
loadingProgress
.expectedTotalBytes!
: null,
),
);
},
),
),
),
]
]
],
),
),
),
),
],
),
),
);
}
}
Output : -
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论