如何在flutter中自定义水平时间选择器? [英] How to customize the horizontal time picker in flutter?

问题描述

我尝试构建一个水平时间选择器 UI，我正在使用这个 有或没有插件，但我得到这个无法自定义 任何方式来实现这一点，下面我附上了我的代码.提前致谢.

I tried to build a horizontal time picker UI in a flutter, I am using this with the plugin or without but I got this one unable to customize Any way to achieve this, below I attached my code. Thanks in Advance.

import 'package:flutter/material.dart';
import 'package:time_range/time_range.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const orange = Color(0xFFFE9A75);
  static const dark = Color(0xFF333A47);
  static const double leftPadding = 50;

  final _defaultTimeRange = TimeRangeResult(
    TimeOfDay(hour: 14, minute: 50),
    TimeOfDay(hour: 15, minute: 20),
  );
  TimeRangeResult? _timeRange;

  @override
  void initState() {
    super.initState();
    _timeRange = _defaultTimeRange;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 16, left: leftPadding),
              child: Text(
                'Select Timing',
                style: Theme.of(context)
                    .textTheme
                    .headline6!
                    .copyWith(fontWeight: FontWeight.bold, color: dark),
              ),
            ),
            SizedBox(height: 20),
            TimeRange(
              fromTitle: Divider(color: Colors.black,),/*Text(
                'FROM',
                style: TextStyle(
                  fontSize: 14,
                  color: dark,
                  fontWeight: FontWeight.w600,
                ),
              ),*/
              toTitle: Divider(color: Colors.black,),/*Text(
                'TO',
                style: TextStyle(
                  fontSize: 14,
                  color: dark,
                  fontWeight: FontWeight.w600,
                ),
              ),*/
              titlePadding: leftPadding,
              textStyle: TextStyle(
                fontWeight: FontWeight.normal,
                color: dark,
              ),
              activeTextStyle: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
              borderColor: Colors.transparent,
              activeBorderColor: Colors.transparent,
              backgroundColor: Colors.transparent,
              activeBackgroundColor: dark,
              firstTime: TimeOfDay(hour: 8, minute: 00),
              lastTime: TimeOfDay(hour: 20, minute: 00),
              initialRange: _timeRange,
              timeStep: 10,
              timeBlock: 30,
              onRangeCompleted: (range) => setState(() => _timeRange = range),
            ),
            SizedBox(height: 30),
            if (_timeRange != null)
              Padding(
                padding: const EdgeInsets.only(top: 8.0, left: leftPadding),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Selected Range: ${_timeRange!.start.format(context)} - ${_timeRange!.end.format(context)}',
                      style: TextStyle(fontSize: 20, color: dark),
                    ),
                    SizedBox(height: 20),
                    MaterialButton(
                      child: Text('Default'),
                      onPressed: () =>
                          setState(() => _timeRange = _defaultTimeRange),
                      color: orange,
                    )
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}

推荐答案

该插件没有参数，您可以轻松设置所选时间的形状.作为一种解决方法，您可以编辑 package:time_range/src/time_button.dart 上的 TimeButton.在 BoxDecoration 中添加 shape: BoxShape.circle 并在 Container 中移除 fit: BoxFit.scaleDown.

The plugin doesn't have a parameter where you can easily set the shape of the selected time. As a workaround, you can edit the TimeButton on package:time_range/src/time_button.dart. Add shape: BoxShape.circle inside BoxDecoration and remove fit: BoxFit.scaleDown inside Container.

child: Container(
  decoration: BoxDecoration(
    // set circle shape
    shape: BoxShape.circle,
    color: value
        ? activeBackgroundColor ?? Theme.of(context).primaryColor
        : backgroundColor ?? Theme.of(context).backgroundColor,
    // borderRadius: BorderRadius.circular(8),
    border: Border.all(
      color: value
          ? activeBorderColor ?? Theme.of(context).primaryColor
          : borderColor ?? Theme.of(context).primaryColor,
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: FittedBox(
      alignment: Alignment.center,
      fit: BoxFit.scaleDown,
      child: Text(
        time,
        style: value ? activeTextStyle : textStyle,
        // one line if always enough since we use the [FittedBox]
        // that scale down the textsize
        // anyways, the [FittedBox] would not work with more then one lines
        maxLines: 1,
      ),
    ),
  ),
),

然后设置想要的时间格式，修改package:time_range/src/time_list.dart中的TimeListState.找到 TimeButtons 的 ListView.builder 并在 time: hour.format(context) 上设置所需的格式.

Then to set the desired Time format, modify TimeListState in package:time_range/src/time_list.dart. Find the ListView.builder for the TimeButtons and set the desired format on time: hour.format(context).

我目前的最终结果是这样的.

My current end result looks like this.

这篇关于如何在flutter中自定义水平时间选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！