代码之家 › 专栏 › 技术社区 › Shaden

删除车身和导航栏之间的空白

navbar navigation dart flutter

Shaden · 技术社区 · 2 年前

我是新来的,这是我的第一次尝试,我正在尝试去除下面突出显示的身体和导航栏之间的空间

enter image description here

这是我试图编码的UI图像

enter image description here

我把safeArea底部设为假,没有任何变化,

SafeArea(
        bottom: false,

我还使用扩展小部件来滚动餐厅,

主体代码:

```flutter
body: SafeArea(
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child:
              Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
            Text("Hello Shaden",
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.w600,
                )),
            Text("Let's find you table",
                style: TextStyle(
                  fontSize: 17,
                  fontWeight: FontWeight.w600,
                )),
            SizedBox(height: 10),
            Container(
              child: TextField(
                onChanged: (value) => runFillter(value),
                obscureText: false,
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  prefixIcon: Icon(Icons.search),
                  hintText: "Search",
                  contentPadding: EdgeInsets.symmetric(vertical: 8),
                  filled: false,
                ),
              ),
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(16)),
            ),
            SizedBox(height: 10),

                    SizedBox(
                      height: 30,
                      child: FoodList(selected, (int index) {
                setState(() {
                  selected = index;
                });
                pageController.jumpToPage(index);},
                          food),
                    ),
                    SizedBox(height: 20),
                    Expanded(
                        child:ResturantMenu(searchState,
                            foundRes,
                                selected,
                                (int index){
                                  setState(() {
                                    selected = index;
                                  });
                                },
                               pageController,
                                food
                              )
                    )],
                    ),
        ),
      ),


###  navigation bar code :

bottomNavigationBar: Container(
        color: Colors.grey,
        child: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          child: NavigationBar(
            height: 60,
            onDestinationSelected: (int index) {
              setState(() {
                currentPageIndex = index;
              });
            },
            selectedIndex: currentPageIndex,
            destinations: const <Widget>[
              NavigationDestination(
                selectedIcon: Icon(Icons.home,size: 30,color: Colors.amber),
                icon: Icon(Icons.home_outlined,size: 30,color: Colors.black),
                label: '',

              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.notifications,size: 30, color: Colors.amber),
                icon: Icon(Icons.notifications_outlined,size: 30, color: Colors.black),
                label: '',
              ),
            ],
          ),
        ),
      ),

1 回复 | 直到 2 年前

rasityilmaz 2 年前

使用 extendBody: true 去除底部填充物,仅此而已。

Scaffold(
      extendBody: true,
      body: SafeArea(
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24) + const EdgeInsets.only(top:24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Hello Shaden',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const Text(
                "Let's find you table",
                style: TextStyle(
                  fontSize: 17,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: 10),
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(16),
                ),
                child: TextField(
                  onChanged: runFillter,
                  style: const TextStyle(
                    fontSize: 12,
                    color: Colors.black,
                  ),
                  decoration: const InputDecoration(
                    border: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    prefixIcon: Icon(Icons.search),
                    hintText: 'Search',
                    contentPadding: EdgeInsets.symmetric(vertical: 8),
                    filled: false,
                  ),
                ),
              ),
              const SizedBox(height: 10),
              SizedBox(
                height: 30,
                child: FoodList(
                  selected,
                  (int index) {
                    setState(() {
                      selected = index;
                    });
                    pageController.jumpToPage(index);
                  },
                  food,
                ),
              ),
              const SizedBox(height: 20),
              Expanded(
                child: ResturantMenu(
                  searchState,
                  foundRes,
                  selected,
                  (int index) {
                    setState(() {
                      selected = index;
                    });
                  },
                  pageController,
                  food,
                ),
              ),
            ],
          ),
        ),
      ),
    )