Question

我正在尝试构建下面的表格，但是并没有达到预期的效果。

我试图将ListView / ListTile用于表单部分，但是当我将其放在Column（以便可以放置文本和按钮）中时，它就会消失。经过一番谷歌搜索后，我发现我必须使用Container设置固定高度或使用Expanded，但是这两种解决方案都不好，因为使用固定高度时，表单无法随着新条目的添加和扩展而增长，从而使按钮移到末尾屏幕事件只有一个条目。

表单类似于： Text（'Fulaninho'）_______________ Text（'R $'）（TextField）

那么...实现此表单的更好方法是什么？

放弃ListView / ListTile之后，我现在拥有的代码是：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:navigation/components/border.dart';
import 'package:navigation/domain/subordinatedmerchant.dart';
import 'package:flutter_masked_text/flutter_masked_text.dart';

class PaymentForm extends StatefulWidget {
  @override
  _PaymentFormState createState() => _PaymentFormState();
}

class _PaymentFormState extends State<PaymentForm> {
  ThemeData _theme;

  var subordinates = <SubordinatedMerchant>[
    SubordinatedMerchant('', 'Paulo Fernandes'),
    SubordinatedMerchant('', 'Felipe Toniloko', tag: 'O cara da panela'),
  ];

  @override
  Widget build(BuildContext context) {
    _theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Efetuar Pagamento'),
      ),
      body: Container(
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Resumo'),
            Padding(padding: EdgeInsets.all(5)),
            _paymentForm(),
          ],
        ),
      ),
    );
  }

  Widget _paymentForm() => RoundedBorder(
        child: Row(
          children: [
            Expanded(
                child: Text(
              'Fulaninho',
              style: _theme.textTheme.body2,
            )),
            Text(
              'R\$ ',
              style: _theme.textTheme.body2,
            ),
            amountText(),
          ],
        ),
      );

  Widget amountText() => ConstrainedBox(
        constraints: BoxConstraints(minWidth: 110, maxWidth: 110),
        child: TextField(
          controller: moneyMask,
          keyboardType: TextInputType.number,
          maxLength: 13,
          textAlign: TextAlign.end,
          decoration: InputDecoration(
            border: InputBorder.none,
            counterText: '',
          ),
        ),
      );

  final moneyMask = MoneyMaskedTextController(
    decimalSeparator: ',',
    thousandSeparator: '.',
    precision: 2,
    leftSymbol: '',
  );
}

Answer 1

我的解决方案是将所有内容都放到ListView中...甚至是按钮。

@override
Widget build(BuildContext context) {
    _theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Efetuar Pagamento'),
      ),
      body: Container(
        padding: EdgeInsets.only(
          left: 15,
          right: 15,
        ),
        child: ListView(
          children: [
            AppTitle('Resumo'),
            for (var p in participants) _paymentForm(p),
            _paymentTotal(participants),
            AppTitle('O que você quer fazer?'),
            SecondaryButton('Selecionar Subordinado'),
            Padding(padding: EdgeInsets.all(5)),
            PrimaryButton('Pagar'),
          ],
        ),
      ),
    );

问题在于，每次状态更改时，它都会重绘所有内容。事件按钮。但是解决了我的问题。

如何用Flutter制作此表格

1 个答案: