如何在另一个带有很多参数的 StatefulWidget class 中使用自定义文本字段？

Question

今天我自己制作了一个自定义文本字段，我想在许多页面中使用它，但它包含一些参数。 你可以在这里看到

import 'package:flutter/material.dart';

class RequiredText extends StatefulWidget {

@override
_RequiredTextState createState() => _RequiredTextState();
}

class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();

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

@override
Widget build(BuildContext context) {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;

return Padding(
  padding: const EdgeInsets.only(left: 18.0),
  child: TextField(
    cursorColor: ColorCursor,
    style: TextStyle(
      color: ColorField,
    ),
    keyboardType: TextInputType.number,
    textInputAction: TextInputAction.next,
    controller: myController,
    decoration: InputDecoration(
        enabledBorder: new OutlineInputBorder(
            borderSide: BorderSide(width: 1.5, color: ColorBorder)),
        border: OutlineInputBorder(
            borderSide: new BorderSide(color: Colors.cyan[200]),
            borderRadius: new BorderRadius.all(Radius.circular(20.0))),
        helperText: HelperTextField,
        labelText: LabelTextField,
        labelStyle: TextStyle(
          color: Colors.black26,
          fontSize: 20.0,
          fontFamily: 'DancingScript',
        ),
        icon: Icon(
          Icons.apps,
        )),
  ),
);
}
}

但我也想在我的 main.dart class 和其他页面中使用它。 但是显示错误

import 'package:AllInOneCalci/CustomTextFields.dart';
import 'package:AllInOneCalci/customAppBar.dart';
import 'package:flutter/material.dart';

class BMICalcUI extends StatefulWidget {
@override
_BMICalcUIState createState() => _BMICalcUIState();
}

class _BMICalcUIState extends State<BMICalcUI> {
 @override
 Widget build(BuildContext context) {
 double AppBarHeight = MediaQuery.of(context).size.height;
 return Scaffold(
   appBar: customAppBar(
    height: (AppBarHeight / 3) * 0.4,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 18.0),
          child: Text(
            'All In One Cali',
            style: TextStyle(
                color: Colors.black,
                fontSize: 35.0,
                fontFamily: 'DancingScript',
                fontWeight: FontWeight.bold),
          ),
        ),
      ],
    ),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 18.0),
    child: Container(
      width: 300.0,
      child: Column(
        children: [
          RequiredText('Height', 'Input height in meters', Colors.cyan[200],
              Colors.redAccent, Colors.redAccent),
        ],
      ),
    ),
  ),
);
 }
}

我也想在我的许多页面中使用它。你能帮我看看我该怎么做吗？ 这对我很有帮助。我被困在这里了

RequiredText('Height', 'Input height in meters', Colors.cyan[200],
          Colors.redAccent, Colors.redAccent),

此行显示错误。

Answer 1

String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;

你提到了参数但你没有初始化它，这样做

class RequiredText extends StatefulWidget {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
RequiredText(this.LabelTextField,this.HelperTextField,this.ColorBorder,this.ColorField,this.ColorCursor);
@override
_RequiredTextState createState() => _RequiredTextState();
}

class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();

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

@override
Widget build(BuildContext context) {


return Padding(
  padding: const EdgeInsets.only(left: 18.0),
  child: TextField(
    cursorColor: widget.ColorCursor,
    style: TextStyle(
      color: widget.ColorField,
    ),
    keyboardType: TextInputType.number,
    textInputAction: TextInputAction.next,
    controller: myController,
    decoration: InputDecoration(
        enabledBorder: new OutlineInputBorder(
            borderSide: BorderSide(width: 1.5, color: widget.ColorBorder)),
        border: OutlineInputBorder(
            borderSide: new BorderSide(color: Colors.cyan[200]),
            borderRadius: new BorderRadius.all(Radius.circular(20.0))),
        helperText: widget.HelperTextField,
        labelText: widget.LabelTextField,
        labelStyle: TextStyle(
          color: Colors.black26,
          fontSize: 20.0,
          fontFamily: 'DancingScript',
        ),
        icon: Icon(
          Icons.apps,
        )),
  ),
);
}
}

如何在另一个带有很多参数的 StatefulWidget class 中使用自定义文本字段？

How to use custom text field in another StatefulWidget class with a lot of parameters?

android-layout

flutter

flutter-test

flutter-layout