Flutter圆形头像

huangapple
go评论70阅读模式
英文:

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?

Flutter圆形头像

Flutter圆形头像

The code:

import &#39;package:flutter/material.dart&#39;;

class AddUserPage extends StatefulWidget {
  const AddUserPage({Key? key}) : super(key: key);

  @override
  State&lt;AddUserPage&gt; createState() =&gt; _AddUserPageState();
}

class _AddUserPageState extends State&lt;AddUserPage&gt; {
  final List&lt;String&gt; profiles = [
    &#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png&#39;,
    &#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png&#39;,
    &#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png&#39;,
    &#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png&#39;,
    &#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png&#39;
  ];

  @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) =&gt; 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,
                                    ),
                                  );
                                },
                              ),
                            ),
                          ),
                        ]
                      ]
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

Flutter圆形头像

英文:

Full Code : -

import &#39;package:flutter/material.dart&#39;;
void main() =&gt; runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: &#39;Image&#39;,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const AddUserPage(),
);
}
}
class AddUserPage extends StatefulWidget {
const AddUserPage({Key? key}) : super(key: key);
@override
State&lt;AddUserPage&gt; createState() =&gt; _AddUserPageState();
}
class _AddUserPageState extends State&lt;AddUserPage&gt; {
int centeredWidgetIndex = 0;
final List&lt;String&gt; profiles = [
&#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png&#39;,
&#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png&#39;,
&#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png&#39;,
&#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png&#39;,
&#39;http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png&#39;,
];
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) =&gt; Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (int i = 0; i &lt; 2; i++) ...[
if (index == gridLength() - 1 &amp;&amp;
i == 1 &amp;&amp;
(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 : -

Flutter圆形头像

huangapple
  • 本文由 发表于 2023年1月9日 19:18:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/75056517.html
  • flutter
  • flutter-animation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定