Question

我刚刚开始学习颤抖并试图改进我的编程。

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

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

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

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

在我看来，小部件包含文本编辑器字段和计算按钮＆amp; HomePageBody应该是StateFulWidget和HomePageBody小部件可以有patientWeight成员变量。并且onPress of Calculate按钮你可以使用setState方法，它会自动重建视图和HomePageBody与新的patientWeight字段像这样：

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。（您可能需要为@required注释导入flutter foundation才能工作。）

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

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

1 个答案: