RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1175170
Accepted
Anton
Anton
Asked:2020-09-07 17:14:05 +0000 UTC2020-09-07 17:14:05 +0000 UTC 2020-09-07 17:14:05 +0000 UTC

如何使 ListWheelScrollView 小部件变圆?

  • 772

如何使ListWheelScrollView小部件变圆,有可能吗?我制作了Container小部件

Container(
 decoration: BoxDecoration(
  color: Colors.amber,
  shape: BoxShape.circle,
 )
),

并在其中放置了一个ListWheelScrollView,理论上列表不应该爬出它的父级并且应该变成圆形吗?接下来,部分标记和照片。

Container(
 decoration: BoxDecoration(
  color: Colors.amber,
  shape: BoxShape.circle,
 ),
 child: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  child: ListWheelScrollView(

   itemExtent: 50, //height / высота
   squeeze: 1.0, //divider / разделитель
   diameterRatio: 2.0, //diameter / сотношение
   offAxisFraction: 0.0, //bias / смещение +to left -to right

   onSelectedItemChanged: (index) {
    setState(() {
     _ara.forEach( (value) => value.isSelected = false );
     _ara[index].isSelected = true;
     _str = '${_ara[index].data}';
    });
   },

   children: <Widget>[
    for(int i=0; i<_ara.length; i++)
     _getItemList(context, i)
   ],

  ),
 ),
),

在此处输入图像描述

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData(
    primarySwatch: Colors.blue,
   ),
   home: Scaffold(
    appBar: AppBar(
     title: Text('Name Page'),
    ),
    body: MyHomePage(),
   ),
  );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

 List< ItemListData<String> > _ara;

 double _height;
 double _width;
 TextStyle _textStyle;

 String _str;

 @override
 void initState() {
  super.initState();

  _ara = _populateData(20);

  _width = double.infinity;
  _height = double.infinity;
  _textStyle = TextStyle(
   color: Colors.white,
   fontSize: 20.0,
   fontWeight: FontWeight.bold,
  );

  _str = '';

 }

 @override
 void dispose() {
  super.dispose();

 }

 void _f1() {
  setState(() {

  });
 }

 //метод возвращает коллекцию, которая была заполнена объектами класса ItemListData<String>
 //method returns a collection which was filled the objects of the cllass ItemListData<String>
 List _populateData(int amount) {
  List< ItemListData<String> > ara = [];
  for(int i = 0; i<amount; ) {
   i++;
   ara.add( ItemListData<String>('$i') );
  }
  return ara;
 }

 //метод возвращает элемент прокручиваемого списка
 //method returns an element of the scrolling list
 //Widget _getItemList(BuildContext context, int index) {}
 Widget _getItemList(_, index) =>
  Container(
   width: _width,
   height: _height,
   color: _ara[index].isSelected ? Colors.pink : Colors.cyan,
   alignment: Alignment.center,
   child: Text(
    '${_ara[index].data}',
    style: _textStyle,
   ),
  );

 @override
 Widget build(BuildContext context) {
  return Column(
   mainAxisSize: MainAxisSize.max,
   mainAxisAlignment: MainAxisAlignment.start,
   children: <Widget>[
    Expanded(
     flex: 1,
     child: Container(
      alignment: Alignment.center,
      child: Text(
       _str,
       style: TextStyle(
        color: Colors.pink,
        fontSize: 36.0
       ),
      ),
     ),
    ),
    Expanded(
     flex: 1,
     child: Container(
      decoration: BoxDecoration(
       color: Colors.amber,
       shape: BoxShape.circle,
      ),
      child: Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: ListWheelScrollView(

        itemExtent: 50, //height / высота
        squeeze: 1.0, //divider / разделитель
        diameterRatio: 2.0, //diameter / сотношение
        offAxisFraction: 0.0, //bias / смещение +to left -to right

        onSelectedItemChanged: (index) {
         setState(() {
          _ara.forEach( (value) => value.isSelected = false );
          _ara[index].isSelected = true;
          _str = '${_ara[index].data}';
         });
        },

        children: <Widget>[
         for(int i=0; i<_ara.length; i++)
          _getItemList(context, i)
        ],

       ),
      ),
     ),
    ),
   ],
  );
 }
}

//данные, которые будут отображаться в элементе списка
//data which will be shown in the item of the list
class ItemListData<T> {
 bool isSelected = false;
 T data;
 ItemListData(this.data);
}
flutter
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    MiT
    2020-09-08T00:26:12Z2020-09-08T00:26:12Z

    我扔了你需要看的方向,然后你自己......

    Expanded(
      flex: 1,
      child: ClipOval(
        clipper: CircleRevealClipper(),
        child: Container(
          color: Colors.amber,
          child: ListWheelScrollView(
            itemExtent: 50, //height / высота
            squeeze: 1.0, //divider / разделитель
            diameterRatio: 2.0, //diameter / сотношение
            offAxisFraction: 0.0, //bias / смещение +to left -to right
            ...
          ),    
        ),
      ),
    ),
    
    class CircleRevealClipper extends CustomClipper<Rect> {
      @override
      Rect getClip(Size size) {
        var center =
            size.center(Offset.zero); // Offset(size.width / 2, size.height / 2);
        var radius =
            math.min(center.dx, center.dy); // min(size.width / 2, size.height / 2);
    
        return Rect.fromCircle(center: center, radius: radius);
      }
    
      @override
      bool shouldReclip(CustomClipper<Rect> oldClipper) {
        return true;
      }
    }
    
    • 1

相关问题

  • 1 秒后打印每个列表值

  • 颤振函数调用

  • 如何将代码分配给参数

  • 如何在字符串中放置空格?

  • 更改 Firestore 中的布尔值

  • 显示数据

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5