问题

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

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

代码：

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

I wanna display 6 squares in one container (height of the container is 1/3 of the screen) like the given image How to do?

在Flutter中将sqflite数据库数据显示为表格：

Trouble using Provider

在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 在上下文菜单中以大文本形式打开

发表评论