Question

我是开发人员应用程序，我刚刚从应用程序中获取了一些代码，我只需要购物车页面按钮，使一个浮动操作按钮，此按钮显示购物车中有多少产品，如果counter = 0，我也想这样做如果他们将商品添加到购物篮中，则隐藏该FloatingActionButton，如果您有任何建议，请显示该时间，非常感谢

'class CustomAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CartListBloc bloc = BlocProvider.getBloc<CartListBloc>();
// TODO: implement build
return Container(
  margin: EdgeInsets.only(bottom: 5),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      StreamBuilder(
        stream: bloc.listStream,
        builder: (context, snapshot) {
          List<FoodItem> foodItems = snapshot.data;
          int length = foodItems != null ? foodItems.length : 0;

          return buildGestureDetector(length, context, foodItems);
        },
      )
    ],
  ),
   );
 }

  GestureDetector buildGestureDetector(
    int length, BuildContext context, List<FoodItem> foodItems) {
  return GestureDetector(
  onTap: () {
    if (length > 0) {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => Cart()));
    } else {
      return;
    }
  },
  child: Container(
            margin: EdgeInsets.only(left: 30),
    child: Text(length.toString()),
    padding: EdgeInsets.all(15),
    decoration: BoxDecoration(
        color: Colors.yellow[800], borderRadius: BorderRadius.circular(50)),
  ),
 );

}'

Answer 1

首先，您需要一个有状态的小部件，而不是无状态的小部件。如果您使用的是VS代码，它实际上可以自动为您完成。

一旦有了，一个变量将是“长度”。

String length;

void initState() {
    length=0;
}

每增加一次，就必须致电...

setState(() {
      length+=1;
    });

或向下...

setState(() {
      length-=1;
    });

您的浮动操作按钮将为...

(length==0)?
Container():
GestureDetector(
  onTap: () {
    Navigator.push(
      context, MaterialPageRoute(builder: (context) => Cart()));
  },
  child: Container(
            margin: EdgeInsets.only(left: 30),
    child: Text(length.toString()),
    padding: EdgeInsets.all(15),
    decoration: BoxDecoration(
        color: Colors.yellow[800], borderRadius: BorderRadius.circular(50)),
  ),
 );

这意味着如果购物车长度为0，它将显示一个空容器。如果购物车不为0，则会显示一个带有长度的按钮

如何将容器转到浮动操作按钮

1 个答案: