Question

在我的Flutter项目中，我已经使用容器创建了一个底部栏。

这是为此提供的代码-

   Scaffold(
    body: Column(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 300,
        ),
        Expanded(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              getCarousel(),
              Column(

                children: <Widget>[
                  Container(
                    height: 240,
                    color: Colors.yellow,
                  ),

                  Container(
                    color: Colors.teal,
                   height: 300,
                  ),


                ],
              ),
              Container(
                height: 350,
                width: double.infinity,
                color: Colors.red,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  padding: new EdgeInsets.only(bottom: 72.0),
                  itemCount: itemList.length,
                  itemBuilder: (BuildContext context, int position) {
                    return new Column(
                      children: <Widget>[

                        Expanded(
                          child: new Container(
                            width: 160,
                            height: 320,
                            color: Colors.yellow[100],
                          ),
                        ),

                        new Divider()
                      ],
                    );
                  },
                ),
              ),
            ],
          ),
        ),

        Container(
          height: 60,
          width: double.maxFinite,
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.grey),
              borderRadius:
              BorderRadius.vertical(top: Radius.circular(20.0))),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              showBottomIcons(Icons.home, "Home", "/HomeScreen"),
              showBottomIcons(
                  Icons.category, "Category", "/CategoryScreen"),
              showBottomIcons(Icons.shopping_cart, "Cart", "/CartScreen"),
              showBottomIcons(Icons.person, "Account", "/AccountScreen"),
            ],
          ),
        )
      ],
    ),
  )

屏幕的输出看起来像这样-

现在，我想将容器更改为Card 。 但是我遇到了一些问题-

默认情况下，卡片会填充一些填充物，并且两个上角的边框半径不起作用。
随着顶部两个角的变圆，背景变得越来越白（如您在图像中所见）。我想要那个红色的空间。
我需要一些带有边框半径的高程，例如使用卡片在图片下方-

Answer 1

＆3.您实际上不需要此卡小部件。您可以在容器本身上添加阴影。
您必须使用堆栈来实现这一目标。

我希望您使用的是与您之前对另一个问题的回答相同的代码。我已经用堆栈布局和您的要求更新了答案

       Container(
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              Positioned.fill(
                child: Container(
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text("Hello"),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 50,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                      boxShadow: [
                        new BoxShadow(
                          color: Colors.black,
                          blurRadius: 2.0,
                        ),
                      ],
                      color: Colors.yellow,
                      borderRadius:
                          BorderRadius.vertical(top: Radius.circular(20.0))),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.arrow_forward),
                        onPressed: () {},
                      ),
                      IconButton(
                        icon: Icon(Icons.arrow_downward),
                        onPressed: () {},
                      ),
                      IconButton(
                        icon: Icon(Icons.arrow_left),
                        onPressed: () {},
                      ),
                      IconButton(
                        icon: Icon(Icons.arrow_upward),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        )

代码编辑步骤

我将尝试解释这些变化。

您的Column中有多个项目。将您用作底栏（列的最后一个子项）的Container以外的所有内容都移动到另一个Column小部件。
将最后一个容器子项放入Align小部件中，就像我的代码一样
将新创建的Column放在Positioned.fill小部件中。
将column中的scaffold更改为Stack
将此堆栈的fit属性设置为StackFit.expand
1. 脚手架的身体应该看起来像这样。

Stack(
  fit: StackFit.expand,
  children: <Widget>[
      Positioned.fill(
        child: Column(
           children: <Widget>[
           ....   // Your page body childs
           ]
        ),
    ),
    Align(
       alignment: Alignment.bottomCenter,
       child: ...    // Your bottom bar container
    )
  ]
)

要了解有关堆栈的更多信息，请访问here

如何使用Card制作一个带有边框半径的底栏，并在Flutter中为其添加高程？

1 个答案: