flutter - 如何将按下按钮的颜色更改为绿色，将行中的其他按钮颜色更改为中性

问题描述

这背后的想法是我希望用户选择他们的性别、性取向和关系状态。所以第一行会有一个按钮说“男性”，另一个说“女性”，另一个说“其他”。在其下方将有 3 个其他按钮表示“异性恋”、“同性恋”和“其他”，而在该下方还有另外一行带有 3 个按钮（选项）。一旦用户单击一个按钮，该按钮基本上就会切换，并且它会从例如黑色变为绿色。我创建了 boolean toggleOn 并将在按钮按下时设置为 true 或 false。问题是现在我在屏幕上出现错误，我认为这是因为我正在检查可用像素并且 singleChildScrollView 不起作用。有任何想法吗？如果您现在感到畏缩，我也很抱歉，我只是在制作一个个人项目来学习编码。

这是我希望有 3 行，每行有 3 个按钮的屏幕

import 'package:./components/rounded_button.dart';
import 'package:./screens/register_screen.dart';
import 'package:flutter/material.dart';

class UserRegisterPreferences extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scaffold(
        backgroundColor: Color(0xff1e1e1e),
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    bool toggleOn = false;
    Size size = MediaQuery.of(context).size;
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[
        Container(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                roundedButton(
                  press: () => setState(() => toggleOn = !toggleOn),
                ),
                roundedButton(
                  press: () => setState(() => toggleOn = !toggleOn),
                ),
                roundedButton(),
              ],
            ),
          ),
        ),
        Column(
          children: <Widget>[
            roundedButton(),
            roundedButton(),
            roundedButton(),
          ],
        ),
        Column(children: <Widget>[
          roundedButton(),
          roundedButton(),
          roundedButton(),
        ]),
      ],
    );
  }
}

这是包含按钮的文件，因此我可以继续在应用程序上重复使用

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

// ignore: camel_case_types
class roundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;
  const roundedButton({
    Key key,
    this.text,
    this.press,
    this.color = kPrimaryColor,
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      width: size.width * 0.7,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(29),
        child: TextButton(
          style: TextButton.styleFrom(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
            primary: Colors.white,
            backgroundColor: kPrimaryColor,
          ),
          onPressed: press,
          child: Text(text),
        ),
      ),
    );
  }
}

标签： flutterdart

flutter - 如何将按下按钮的颜色更改为绿色，将行中的其他按钮颜色更改为中性

问题描述

解决方案

推荐阅读