首页 > 解决方案 > Flutter:如何为文本列表中的中间文本制作更大的字体?

问题描述

我想实现这样的目标

https://imgur.com/v5AUgyz

在这里,当用户滚动列表时,它应该将元素的字体大小调整为middle,将bigger其他元素的字体大小调整为smaller

我试过这样做,但我没有得到想要的输出,

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter_hooks/flutter_hooks.dart';
class BloodPressureValuesWidget extends HookWidget {
  final List<String> mm = ['110', '110', '110', '110', '110','110', '110', '110', '110', '110'];
  final List<String> hg = ['70', '70', '70', '70', '70','70', '70', '70', '70', '70'];
  final List<String> date = [
    '2/12/2020',
    '3/12/2020',
    '4/12/2020',
    '5/12/2020',
    '6/12/2020',
  ];
  final List<String> time = [
    '16.10pm',
    '10:30am',
    '15:30pm',
    '3:40am',
    '15:40pm',
  ];
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final pageController =
        usePageController(keepPage: false, viewportFraction: 0.4);
    return Container(
      height: width * 0.27,
      width: double.infinity,
      margin: EdgeInsets.only(bottom: width * 0.021),
      child: PageView.builder(
        itemCount: 10,
        scrollDirection: Axis.horizontal,
        controller: pageController,
        itemBuilder: (context, index) {
          return AnimatedBuilder(
            animation: pageController,
            builder: (context, child) {
              var value = 1.0;
              if (pageController.position.haveDimensions) {
                value = pageController.page - index;
                value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
              }
              return Center(
                child: SizedBox(
                  height: Curves.easeOut.transform(value) * width * 0.4,
                  width: Curves.easeOut.transform(value) * width * 0.25,
                  child: child,
                ),
              );
            },
            child: Container(...), //The text container shown in the image
            ),
          );
        },
      ),
    );
  }
}

谁能告诉我我怎样才能做到这一点?

标签: flutterdartflutter-animation

解决方案


ListViewScrollView课,在这里查看更多


推荐阅读