android - Flutter ListView 项目根据来自 TextField 的添加数量进行更改

Question

我刚刚开始学习 Flutter 并尝试提高我的编程水平。

如您在屏幕截图中所见，我有一个带有按钮的文本字段，然后是其下方的 ListView 。

在我的应用程序中，我需要 ListView 中的一个项目根据患者的体重(特别是给定的量)进行更改。我如何根据文本字段中给定的权重向每个 ListView 项目显示不同的“给定金额”？

这是我当前的列表项代码和用于显示它的条码。

Sliver 显示列表项:

import 'package:flutter/material.dart';
import 'package:stafford_county_medications/ui/medication_row.dart';
import 'package:stafford_county_medications/model/medication_list.dart';

class HomePageBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Expanded(
      child: new Container(
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.symmetric(vertical: 24.0),
              sliver: new SliverFixedExtentList(
                itemExtent: 172.0,
                delegate: new SliverChildBuilderDelegate(
                      (context, index) => new MedicationRow(medications[index]),
                  childCount: medications.length,

                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

列表项:

import 'package:flutter/material.dart';
import 'package:stafford_county_medications/model/medication_list.dart';
import 'package:stafford_county_medications/ui/home_page.dart';

class MedicationRow extends StatelessWidget {
  final Medication medication;
  final Medication amountGiven;

  MedicationRow(this.medication);

  @override
  Widget build(BuildContext context) {
    final medicationCardContent = new Container(
      margin: new EdgeInsets.all(16.0),
      constraints: new BoxConstraints.expand(),
      child: new Container(
        height: 4.0,
        child: new Column(
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new Image.asset('assets/img/pill.png', height: 30.0),
                        new Container(width: 5.0),
                        new Text('Medication:',
                            style: new TextStyle(fontWeight: FontWeight.bold)
                        ),
                      ],
                    ),
                    new Container(height: 5.0),
                    new Text(medication.name),
                    new Container(height: 5.0),
                    new Text(medication.name2),
                    new Container(height: 5.0),
                  ],
                ),
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        new Image.asset('assets/img/injection-icon.png',
                            height: 30.0),
                        new Container(width: 5.0),
                        new Text('Dosage:',
                            overflow: TextOverflow.ellipsis,
                            style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                    new Container(height: 5.0),
                    new Text(medication.dosage,
                    overflow: TextOverflow.ellipsis),
                    new Container(height: 5.0),
                  ],
                ),
              ],
            ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new Text('Amount to give:'),
                new Text(amountGiven.toString()),
              ],
            ),
          ],
        ),
      ),
    );

    final medicationCard = new Container(
      child: medicationCardContent,
      height: 140.0,
      decoration: new BoxDecoration(
        color: new Color(0xFFFFFFFF),
        shape: BoxShape.rectangle,
        borderRadius: new BorderRadius.circular(8.0),
        boxShadow: <BoxShadow>[
          new BoxShadow(
            color: Colors.black12,
            blurRadius: 10.0,
            offset: new Offset(0.0, 10.0),
          ),
        ],
      ),
    );

    return new Container(
      height: 140.0,
      margin: EdgeInsets.all(16.0),
      child: new Column(
        children: <Widget>[
          medicationCard,
        ],
      ),
    );
  }
}

我认为我需要将列表项更改为有状态小部件，但之后我就不知道了。如果我需要添加其他帮助，请告诉我。在此先感谢您提供的任何帮助。

Answer 1

在我看来，包含Text editor field和calculate button & HomePageBody的widget应该是StateFulWidget，HomePageBody widget可以有patientWeight成员变量。 在按下计算按钮时，您可以使用 setState 方法，该方法会使用新的 patientWeight 字段自动重建 View 和 HomePageBody 像这样:

class HomePageBodyContainer extends StatefulWidget {
 @override
 State createState ()=> new HomePageBodyContainerState();
}

HomePageBodyContainerState extends State<HomePageBodyContainer>{
 double _patientWeight = 0.0;
 @override
 Widget build(BuildContext context){
  return new Column(
  children: <Widget>[
   ....textfield code
   ....button code
   onPress: (){ setState((){ _patientWeight = double.parse(textFieldsValue); }); },
   ...
   ...
   new HomePageBody(patientWeight: _patientWeight),
]
);
}
}

然后在 HomePageBody 中添加类型为 double 的字段，该字段将传递给 MedicalRow。 (您可能需要导入 flutter foundation 才能使 @required 注释起作用。)

class HomePageBody extends StatelessWidget{
   final double patientWeight;
   HomePageBody({@required this.patientWeight});
}