Flutter ListView 项目根据 TextField 中添加的数字进行更改

Posted 2023-02-23

【中文标题】Flutter ListView 项目根据 TextField 中添加的数字进行更改

【英文标题】：Flutter ListView item changes based on added number from TextField

【发布时间】：2018-11-27 09:16:32

【问题描述】：

我刚刚开始学习 Flutter，并试图总体上改进我的编程。

正如您在屏幕截图中看到的那样，我有一个带有按钮的文本字段，然后是一个列表视图。

在我的应用程序中，我需要列表视图中的一个项目来根据患者的体重（特别是给定的数量）进行更改。如何根据文本字段中给出的权重为每个列表视图项显示不同的“给定数量”？

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

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,
        ],
      ),
    );
  

我相信我需要将列表项更改为有状态小部件，但之后我不知道。如果我需要添加其他内容来帮助，请告诉我。提前感谢您提供任何可能的帮助。

【参考方案1】：

在我看来，包含文本编辑器字段和计算按钮和 HomePageBody 的小部件应该是 StateFulWidget，而 HomePageBody 小部件可以有 patientWeight 成员变量。 并且 onPress of Calculate 按钮您可以使用 setState 方法，该方法将使用新的 patientWeight 字段自动重建视图和 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);

【讨论】：

感谢您的回答。我会看看这是否能让我到达我想去的地方。 :)