添加闪烁到按钮-Java 学习之路

我想在选择一个单选按钮的时候引起用户注意一个提交按钮，我想知道是否有任何方法可以实现这一点 . 我查看了RaisedButton文档，但似乎没有任何属性闪烁或摇动按钮 . 例如，下面的代码最初没有选择单选按钮，因此按钮显示为灰色，一旦在多个单选按钮之间做出选择，提交的RaisedButton onPressed属性值不再为null，而是替换为所需的操作;但是我还想要一种情况，如果选择了一个不同的单选按钮，有一些方法可以向提交按钮添加一些动作（闪烁/摇动按钮），但不能更改onPressed属性

new Radio<int>(
value: 1, 
groupValue: 0, 
onChanged: handleRadioValue
)

new RaisedButton(
child: const Text('SUBMIT')
onPressed: selected
)

handleRadioValue(){
selected = groupValue == 0 ? null : submitButton();
//change Raised button to attract attention}

1 回答

您可以通过动画 RaisedButton 的 color 来吸引注意力 . 当通过将其颜色更改为当前主题的 disabledColor 并返回时，单选按钮选择发生更改时，此示例将引起注意 RaisedButton .

screenshot

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  int _radioValue;

  @override initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    )..addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed)
        _controller.reverse();
    });
    super.initState();
  }

  void _handleRadioValue(int value) {
    // Don't animate the first time that the radio value is set
    if (_radioValue != null)
      _controller.forward();
    setState(() {
      _radioValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Radio<int>(
              value: 0,
              groupValue: _radioValue,
              onChanged: _handleRadioValue
            ),
            new Radio<int>(
              value: 1,
              groupValue: _radioValue,
              onChanged: _handleRadioValue
            ),
            new AnimatedBuilder(
              child: const Text('SUBMIT'),
              animation: _controller,
              builder: (BuildContext context, Widget child) {
                return new RaisedButton(
                  color: new ColorTween(
                    begin: theme.primaryColor,
                    end: theme.disabledColor,
                  ).animate(_controller).value,
                  colorBrightness: Brightness.dark,
                  child: child,
                  onPressed: _radioValue == null ?
                             null :
                             () => print('submit')
                );
              }
            )
          ],
        ),
      ),
    );
  }

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

回复于 2024-04-27T19:53:21+08:00

添加闪烁到按钮

1 回答

相关问题