導航中的水平滑動選單項顫動？

我是撲撲的新手。是否可以在顫動的導航抽屜中創建水平滑動選單項？如果可能，如何存檔此小部件？我提供下面的用戶界面

uj5u.com熱心網友回復：

它可以使用ListViewinside Drawer，在這種情況下，您需要提供高度ListView

class AppDrawer extends StatelessWidget {
  const AppDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          DrawerHeader(
              child: Column(
            children: [
              Text("Logo"),
              SizedBox(
                height: 50, // the amount you want
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 12,
                  itemBuilder: (context, index) => Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    margin: EdgeInsets.only(right: 10),
                    padding: EdgeInsets.all(12),
                    child: Text("item $index"),
                  ),
                ),
              )
            ],
          ))
        ],
      ),
    );
  }
}

并使用

  return Scaffold(
        drawer: AppDrawer(),

uj5u.com熱心網友回復：

您可以使用or ( )的scrollDirection欄位。SingleChildScrollViewerListViewAxis.horizontal

uj5u.com熱心網友回復：

串列視圖具有滾動方向。所以scrollDirection: Axis.horizontal將使其水平。

ListView(
  // This next line does the trick.
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(
      width: 160.0,
      color: Colors.red,
    ),
    Container(
      width: 160.0,
      color: Colors.blue,
    ),
    Container(
      width: 160.0,
      color: Colors.green,
    ),
    Container(
      width: 160.0,
      color: Colors.yellow,
    ),
    Container(
      width: 160.0,
      color: Colors.orange,
    ),
  ],
)

你可以這樣做會Row()與SliverList

Row(
          children: <Widget>[
            Flexible(
              child: CustomScrollView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                slivers: <Widget>[
                  SliverPadding(
                    padding: const EdgeInsets.all(20.0),
                    sliver: SliverList(
                      delegate: SliverChildListDelegate(
                        <Widget>[
                          const Text('this horizontal'),
                          const Text('is horizontal'),
                          const Text('scroll horizontal'),
                          const Text('view horizontal'),
                          const Text('inside horizontal'),
                          const Text('list horizontal'),
                          const Text('view horizontal'),
                          const Text('in horizontal'),
                          const Text('horizontal horizontal'),
                          const Text('direction horizontal')
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )

相同的邏輯 scrollDirection: Axis.horizontal

標籤：扑 颤振布局 导航抽屉

上一篇：沒有IF的onGenerateRoute

下一篇：撲。將計算結果顯示為int或double。（數量？）