我的页面在我在不同屏幕之间切换时重叠。

huangapple
go评论62阅读模式
英文:

My page overlaps when I switch between screens

问题

以下是您要翻译的内容：

I hate how when I slide between screens the layout overlaps to the next screen before rendering what's supposed to be there. How do I fix this?
This is the code for the page:

class StallPage extends StatefulWidget {
  final Stall stall;

  const StallPage({super.key, required this.stall});

  @override
  State<StallPage> createState() => _StallPageState();
}

class _StallPageState extends State<StallPage> {
  var selected = 0;
  final pageController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff392850), //kBackground,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CustomAppBar(
            Icons.arrow_back_ios_outlined,
            Icons.search_outlined,
            leftCallback: () => Navigator.of(context).pop(),
            rightCallback: () => Navigator.of(context).pushNamed(searchRoute),
          ),
          StallInfo(
            stall: widget.stall,
          ), //
          FoodList(
            selected,
            (int index) {
              setState(() {
                selected = index;
              });
              pageController.jumpToPage(index);
            },
            widget.stall,
          ),
          Expanded(
            child: FoodListView(
              selected,
              (int index) {
                setState(() {
                  selected = index;
                });
              },
              pageController,
              widget.stall,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 25),
            height: 60,
            child: SmoothPageIndicator(
              controller: pageController,
              count: widget.stall.menu.length,
              effect: CustomizableEffect(
                dotDecoration: DotDecoration(
                  width: 8,
                  height: 8,
                  color: Colors.grey.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(8),
                ),
                activeDotDecoration: DotDecoration(
                  width: 10,
                  height: 10,
                  color: kBackground,
                  borderRadius: BorderRadius.circular(10),
                  dotBorder: const DotBorder(
                    color: kPrimaryColor,
                    padding: 2,
                    width: 2,
                  ),
                ),
              ),
              onDotClicked: (index) => pageController.jumpToPage(index),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: kPrimaryColor,
        elevation: 2,
        child: IconButton(
          icon: Icon(Icons.shopping_cart_outlined),
          color: Colors.black,
          onPressed: () {
            Navigator.of(context).pushNamed(cartRoute);
            context.read<TotalPrice>().update();
          },
        ),
      ),
    );
  }
}

FoodList: //I'm positive the problems somewhere here

class FoodList extends StatelessWidget {
  final int selected;
  final Function callback;
  final Stall stall;

  const FoodList(this.selected, this.callback, this.stall);

  @override
  Widget build(BuildContext context) {
    final category = stall.menu.keys.toList();
    return Container(
      height: 100,
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: ListView.separated(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => GestureDetector(
          onTap: () => callback(index),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: selected == index ? kPrimaryColor : Colors.white,
            ),
            child: Text(
              category[index],
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        separatorBuilder: (_, index) => const SizedBox(width: 20),
        itemCount: category.length,
      ),
    );
  }
}

FoodListView:

class FoodListView extends StatelessWidget {
  final int selected;
  final Function callback;
  final PageController pageController;
  final Stall stall;

  const FoodListView(
    this.selected,
    this.callback,
    this.pageController,
    this.stall,
  );

  @override
  Widget build(BuildContext context) {
    final category = stall.menu.keys.toList();
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25),
      child: PageView(
          controller: pageController,
          onPageChanged: (index) => callback(index),
          children: category
              .map((e) => ListView.separated(
                    padding: EdgeInsets.zero,
                    itemBuilder: (context, index) => GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => DetailPage(
                                stall.menu[category[selected]]![index],
                              ),
                            ),
                          );
                        },
                        child:
                            FoodItem(stall.menu[category[selected]]![index])),
                    separatorBuilder: (_, index) => const SizedBox(height: 15),
                    itemCount: stall.menu[category[selected]]!.length,
                  ))
              .toList()),
    );
  }
}

Stall:

class Stall {
  String name;
  String label;
  String logoUrl;
  String desc;
  num score;
  Map<String, List<Food>> menu;
  Stall(
    this.name,
    this.label,
    this.logoUrl,
    this.desc,
    this.score,
    this.menu,
  );
}

希望这些信息对您有所帮助。

英文:

https://www.veed.io/view/a97effbf-7aad-4c0a-8fd7-8fce2be4808e?sharingWidget=true&amp;panel=share

I hate how when I slide between screens the layout overlaps to the next screen before rendering what's supposed to be there. How do I fix this?
This is the code for the page:

class StallPage extends StatefulWidget {
final Stall stall;
const StallPage({super.key, required this.stall});
@override
State&lt;StallPage&gt; createState() =&gt; _StallPageState();
}
class _StallPageState extends State&lt;StallPage&gt; {
var selected = 0;
final pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff392850), //kBackground,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(
Icons.arrow_back_ios_outlined,
Icons.search_outlined,
leftCallback: () =&gt; Navigator.of(context).pop(),
rightCallback: () =&gt; Navigator.of(context).pushNamed(searchRoute),
),
StallInfo(
stall: widget.stall,
), //
FoodList(
selected,
(int index) {
setState(() {
selected = index;
});
pageController.jumpToPage(index);
},
widget.stall,
),
Expanded(
child: FoodListView(
selected,
(int index) {
setState(() {
selected = index;
});
},
pageController,
widget.stall,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 25),
height: 60,
child: SmoothPageIndicator(
controller: pageController,
count: widget.stall.menu.length,
effect: CustomizableEffect(
dotDecoration: DotDecoration(
width: 8,
height: 8,
color: Colors.grey.withOpacity(0.5),
borderRadius: BorderRadius.circular(8),
),
activeDotDecoration: DotDecoration(
width: 10,
height: 10,
color: kBackground,
borderRadius: BorderRadius.circular(10),
dotBorder: const DotBorder(
color: kPrimaryColor,
padding: 2,
width: 2,
),
),
),
onDotClicked: (index) =&gt; pageController.jumpToPage(index),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: kPrimaryColor,
elevation: 2,
child: IconButton(
icon: Icon(Icons.shopping_cart_outlined),
color: Colors.black,
onPressed: () {
Navigator.of(context).pushNamed(cartRoute);
context.read&lt;TotalPrice&gt;().update();
},
),
),
);
}
}

FoodList: //I'm positive the problems somewhere here

class FoodList extends StatelessWidget {
final int selected;
final Function callback;
final Stall stall;
const FoodList(this.selected, this.callback, this.stall);
@override
Widget build(BuildContext context) {
final category = stall.menu.keys.toList();
return Container(
height: 100,
padding: const EdgeInsets.symmetric(vertical: 30),
child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 25),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =&gt; GestureDetector(
onTap: () =&gt; callback(index),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: selected == index ? kPrimaryColor : Colors.white,
),
child: Text(
category[index],
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
separatorBuilder: (_, index) =&gt; const SizedBox(width: 20),
itemCount: category.length,
),
);
}
}

FoodListView:

class FoodListView extends StatelessWidget {
final int selected;
final Function callback;
final PageController pageController;
final Stall stall;
const FoodListView(
this.selected,
this.callback,
this.pageController,
this.stall,
);
@override
Widget build(BuildContext context) {
final category = stall.menu.keys.toList();
return Container(
padding: EdgeInsets.symmetric(horizontal: 25),
child: PageView(
controller: pageController,
onPageChanged: (index) =&gt; callback(index),
children: category
.map((e) =&gt; ListView.separated(
padding: EdgeInsets.zero,
itemBuilder: (context, index) =&gt; GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =&gt; DetailPage(
stall.menu[category[selected]]![index],
),
),
);
},
child:
FoodItem(stall.menu[category[selected]]![index])),
separatorBuilder: (_, index) =&gt; const SizedBox(height: 15),
itemCount: stall.menu[category[selected]]!.length,
))
.toList()),
);
}
}

Stall:

class Stall {
String name;
String label;
String logoUrl;
String desc;
num score;
Map&lt;String, List&lt;Food&gt;&gt; menu;
Stall(
this.name,
this.label,
this.logoUrl,
this.desc,
this.score,
this.menu,
);
}

答案1

得分: 1

不需要将 selected 传递给 FoodListView，并且 FoodListView 将如下所示修改：

class FoodListView extends StatelessWidget {
  final Function callback;
  final PageController pageController;
  final Stall stall;

  const FoodListView(
    this.callback,
    this.pageController,
    this.stall,
  );

  @override
  Widget build(BuildContext context) {
    final menuList = stall.menu.values.toList();
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 25),
        child: PageView.builder(
          controller: pageController,
          onPageChanged: (index) => callback(index),
          itemCount: menuList.length,
          itemBuilder: (context, menuIndex) {
            final menu = menuList[menuIndex];
            return ListView.separated(
              padding: EdgeInsets.zero,
              itemBuilder: (context, index) => GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => DetailPage(
                          menu[index],
                        ),
                      ),
                    );
                  },
                  child: FoodItem(menu[index])),
              separatorBuilder: (_, index) => const SizedBox(height: 15),
              itemCount: menu.length,
            );
          },
        ));
  }
}

在调用 FoodListView 时去掉 selected 参数。

英文:

No need to pass selected to FoodListView and also FoodListView will be like following

class FoodListView extends StatelessWidget {
final Function callback;
final PageController pageController;
final Stall stall;
const FoodListView(
this.callback,
this.pageController,
this.stall,
);
@override
Widget build(BuildContext context) {
final menuList = stall.menu.values.toList();
return Container(
padding: EdgeInsets.symmetric(horizontal: 25),
child: PageView.builder(
controller: pageController,
onPageChanged: (index) =&gt; callback(index),
itemCount: menuList.length,
itemBuilder: (context, menuIndex) {
final menu = menuList[menuIndex];
return ListView.separated(
padding: EdgeInsets.zero,
itemBuilder: (context, index) =&gt; GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =&gt; DetailPage(
menu[index],
),
),
);
},
child: FoodItem(menu[index])),
separatorBuilder: (_, index) =&gt; const SizedBox(height: 15),
itemCount: menu.length,
);
},
));
}
}

Remove selected where you call FoodListView

huangapple
  • 本文由 发表于 2023年2月16日 05:38:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/75465682.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定