dart 底部像素溢出抖动

tp5buhyn 于 2023-09-28 发布在其他

关注(0)|答案(4)|浏览(118)

我想在我的项目中包括一个底部导航栏，它包含在一个容器中，我已经给了它一定的高度和宽度。但我得到“底部溢出的像素Flutter”在底部时，我运行的程序。我已经包含了resizeToAvoidBottomInset: false,，但它不工作，这是我的代码

import 'package:flutter/material.dart';
import 'package:listview/pages/cart.dart';

class BottomPage extends StatefulWidget {
  const BottomPage({super.key});

  @override
  State<BottomPage> createState() => _BottomPageState();
}

class _BottomPageState extends State<BottomPage> {
  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    List pages = const [CartPage()];
    // ignore: unused_local_variable
    int index = 0;
    // ignore: sized_box_for_whitespace
    return SafeArea(
      
      child: Scaffold(
        resizeToAvoidBottomInset: false,

        body: pages[index],
        bottomNavigationBar: Container(
          // height: 20,
          // width: MediaQuery.sizeOf(context).width / 2,
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              GestureDetector(
                onTap: () {
                  setState(
                    () {
                      index = 0;
                    },
                  );
                  const Icon(Icons.home);
                },
              ),
            ],
          ),
        ),
      ),
    );
    // BottomNavigationBar(
    //   items: const [
    //     BottomNavigationBarItem(
    //       label: "Home",
    //       icon: Icon(Icons.home)
    //     ),
    //     BottomNavigationBarItem(
    //       label: "settings",
    //       icon: Icon(Icons.settings)
    //     ),
    //   ],
    // );

    
  }
}

这里是主区， dart

import 'package:flutter/material.dart';
// ignore: unused_import
import 'reusable/export.dart';

void main() => runApp(const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    ));

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text(
            'Kikuubo Online',
          ),
          centerTitle: true,
        ),
        body:  const Padding(
          padding: EdgeInsets.fromLTRB(16.0,10,0,0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            // mainAxisAlignment: MainAxisAlignment.center,
            children: [
             SizedBoxes(),
              SearchPage(),
              SizedBoxes(),
              //include text
              Text('All categories',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
              ),
              ListBar(),
              SizedBoxes(),
              ContainerPage(),
              SizedBoxes(),
              FilterDart(),
              SizedBoxes(),
              BottomPage(),
            ],
          ),
        ),
      ),
    );
  }
}

dart

来源：https://stackoverflow.com/questions/77185602/bottom-overflowed-by-pixels-flutter

4条答案

按热度按时间

kiayqfof1#

好吧，从你的代码的要点，我得到的想法，你是开始Flutter或一个总的新手。

import 'package:flutter/material.dart';
import 'app/modules/cart/view/cart_view.dart';

class BottomPage extends StatefulWidget {
  const BottomPage({super.key});

  @override
  State<BottomPage> createState() => _BottomPageState();
}

class _BottomPageState extends State<BottomPage> {
  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    List pages = const [CartView()];
    // ignore: unused_local_variable
    int index = 0;
    // ignore: sized_box_for_whitespace
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: pages[index],
        bottomNavigationBar: Container(
          // height: 20,
          // width: MediaQuery.sizeOf(context).width / 2,
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              GestureDetector(
                  onTap: () {
                    setState(
                      () {
                        index = 0;
                      },
                    );
                  },
                  child: const Icon(Icons.home)),
            ],
          ),
        ),
      ),
    );
 // BottomNavigationBar(
    //   items: const [
    //     BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
    //     BottomNavigationBarItem(label: "settings", icon: Icon(Icons.settings)),
    //   ],
    // );
  }
}

这里我修正了你的代码，Icon不会在ontap方法中，你还有很多要学。

赞(0）回复(0）举报 2023-09-28

tzxcd3kk2#

你的代码有问题。您已在GestureDetector的onTap中声明了图标，但应将其声明为GestureDetector的子项。将bottomNavigationBar替换为：-

bottomNavigationBar: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          alignment: Alignment.center,
          child: GestureDetector(
            onTap: () {
              setState(
                () {
                  index = 0;
                },
              );
            },
            child: const Icon(Icons.home),
          ),
        ),
      ],
    ),

赞(0）回复(0）举报 2023-09-28

bgtovc5b3#

只需将const Icon(Icons.home)放入GestureDetector的子参数。
更新您的代码：

GestureDetector(
                onTap: () {
                  setState(
                        () {
                      index = 0;
                    },
                  );
                  //const Icon(Icons.home); ///=> remove this...
                },
                child: const Icon(Icons.home),
              ),

赞(0）回复(0）举报 2023-09-28

uwopmtnx4#

尝试使用BottomNavigationBar，并将此BottomNavigation类指定为启动屏幕后的着陆类/页面

class BottomNavigation extends StatefulWidget {
      const BottomNavigation({super.key});
    
      @override
      _BottomNavigationState createState() => _BottomNavigationState();
    }
    
    class _BottomNavigationState extends State<BottomNavigation> {
      int selectedIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        final List<Widget> btmNavBar = [
          const Home(),
          const TODO(),
          const SETTINGS(),
           const ABOUT(),
         
        ];
        return Scaffold(
          body: btmNavBar[selectedIndex],
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            onTap: onTabTapped,
            currentIndex: selectedIndex,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Ionicons.home_outline),
                label: "Home",
              ),
              BottomNavigationBarItem(
                icon: Icon(Ionicons.list_outline),
                label: "TODO",
              ),
              BottomNavigationBarItem(
                icon: Icon(Ionicons.time_outline),
                label: "SETTINGS",
              ),
              BottomNavigationBarItem(
                icon: Icon(Ionicons.person_outline),
                label: "ABOUT",
              )
            ],
          ),
        );
      }
    
      void onTabTapped(int index) {
        setState(() {
          selectedIndex= index;
        });
      }}

希望这有帮助

赞(0）回复(0）举报 2023-09-28

我来回答

dart 底部像素溢出抖动

4条答案

相关问题

热门标签

最新问答