使用 TextField Flutter 选择购物车数量
Posted
技术标签:
【中文标题】使用 TextField Flutter 选择购物车数量【英文标题】：Cart Quantity selection with TextField Flutter 【发布时间】：2021-03-31 04:22:16 【问题描述】：我想在颤振中添加文本字段，当用户添加值时应该更新数量值，你可以在下面的项目图像中看到有数量我想添加一个文本字段，这样用户就可以像他一样编辑数量想添加你可以问任何你想问的问题
这里是数量选择
class QuantitySelection extends StatelessWidget
final int limitSelectQuantity;
final int value;
final double width;
final double height;
final Function onChanged;
final Color color;
QuantitySelection(
@required this.value,
this.width = 40.0,
this.height = 42.0,
this.limitSelectQuantity = 100,
@required this.color,
this.onChanged);
@override
Widget build(BuildContext context)
return GestureDetector(
onTap: ()
if (onChanged != null)
showOptions(context);
,
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: kGrey200),
borderRadius: BorderRadius.circular(3),
),
height: height,
width: width,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 2.0, horizontal: (onChanged != null) ? 5.0 : 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Center(
child: Text(
value.toString(),
style: TextStyle(fontSize: 14, color: color),
),
),
),
if (onChanged != null)
const SizedBox(
width: 5.0,
),
if (onChanged != null)
Icon(Icons.keyboard_arrow_down,
size: 14, color: Theme.of(context).accentColor)
],
),
),
),
);
void showOptions(context)
showModalBottomSheet(
context: context,
builder: (BuildContext context)
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
for (int option = 1;
option <= limitSelectQuantity;
option++)
ListTile(
onTap: ()
onChanged(option);
Navigator.pop(context);
,
title: Text(
option.toString(),
textAlign: TextAlign.center,
)),
],
),
),
),
Container(
height: 1,
decoration: BoxDecoration(color: kGrey200),
),
ListTile(
title: Text(
S.of(context).selectTheQuantity,
textAlign: TextAlign.center,
),
),
],
);
);
这是购物车
class ShoppingCartRow extends StatelessWidget
ShoppingCartRow(
@required this.product,
@required this.quantity,
this.onRemove,
this.onChangeQuantity,
this.variation);
final Product product;
final ProductVariation variation;
final int quantity;
final Function onChangeQuantity;
final VoidCallback onRemove;
@override
Widget build(BuildContext context)
String currency = Provider.of<AppModel>(context).currency;
final currencyRate = Provider.of<AppModel>(context).currencyRate;
final price = Services()
.widget
.getPriceItemInCart(product, variation, currencyRate, currency);
final imageFeature = variation != null && variation.imageFeature != null
? variation.imageFeature
: product.imageFeature;
int maxQuantity = kCartDetail['maxAllowQuantity'] ?? 100;
int totalQuantity = variation != null
? (variation.stockQuantity ?? maxQuantity)
: (product.stockQuantity ?? maxQuantity);
int limitQuantity =
totalQuantity > maxQuantity ? maxQuantity : totalQuantity;
ThemeData theme = Theme.of(context);
return LayoutBuilder(
builder: (context, constraints)
return Column(children: [
Row(
key: ValueKey(product.id),
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (onRemove != null)
IconButton(
icon: Icon(Icons.remove_circle_outline),
onPressed: onRemove,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(children: <Widget>[
Container(
width: constraints.maxWidth * 0.25,
height: constraints.maxWidth * 0.3,
child: Tools.image(url: imageFeature)),
Positioned(
bottom: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: kGrey200),
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(2.0)),
),
child: QuantitySelection(
width: 60,
height: 32,
color: Theme.of(context).accentColor,
limitSelectQuantity: limitQuantity,
value: quantity,
onChanged: onChangeQuantity,
),
),
)
]),
SizedBox(width: 16.0),
Expanded(
child: Container(
),
),
Expanded(
child: Container(
height: constraints.maxWidth * 0.3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.name,
style: TextStyle(
color: theme.accentColor,
),
maxLines: 4,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 7),
Text(
price,
style: TextStyle(
color: theme.accentColor, fontSize: 14),
),
SizedBox(height: 10),
variation != null
? Services()
.widget
.renderVariantCartItem(variation)
: Container(),
],
),
),
),
],
),
),
),
],
),
SizedBox(height: 10.0),
Divider(color: kGrey200, height: 1),
SizedBox(height: 10.0),
]);
,
);
【问题讨论】：
请更具体一些，您的问题不清楚，您要更新哪个文本字段以及何时更新。 您可以在下面的项目图像中看到我想添加一个文本字段的数量，以便用户可以编辑他想要添加的数量 您可以使用TextField 小部件创建文本字段（请参阅api.flutter.dev/flutter/material/TextField-class.html）。你能把你的问题说得更具体一点吗？
这可能是您要问的答案：Flutter dropdown text field
@spkersten 我知道文本字段，但我想在下拉列表的右侧添加文本字段和按钮如何实现它
【参考方案1】：
我认为有一个带有加号和减号按钮的可编辑数字字段将是一个不错且用户友好的解决方案。使用颤振有多种方法可以做到这一点 - 请查看 this thread 中的解决方案以获取想法。
【讨论】：
我不知道如何处理这段代码，因为你的答案是正确的，所以我接受它是正确的以上是关于使用 TextField Flutter 选择购物车数量的主要内容，如果未能解决你的问题，请参考以下文章