问题

我有一个图像列表，我想将其分成两列放在一个头像圆中，其中一列占据一半的图像，另一列占据其余的图像。

我放了一个简单的代码示例，如何应用它？
还有如何处理列表的长度？

代码：

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 &#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,
                                    ),
                                  );
                                },
                              ),
                            ),
                          ),
                        ]
                      ]
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

英文:

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圆形头像

问题

答案1

安装audio_waveforms包后出现“无法转换exoplayer-hls-2.17.1.aar”错误。

如何给 ExpansionPanelRadio 小部件添加阴影？

"Permission 'logging.logEntries.create' denied on resource (or it may not exist)." error when trying to log to GCP using Flutter

将子部件对齐到一个定位的子部件。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论