在Flutter中，水平可滚动的选项卡以居中为焦点，并具有捕捉功能

Question

我想询问一下，我能否创建一个类似于标签页的教程，将焦点放在中间但左右两个标签页透明度为30%，就像这样，谢谢！

- Ismail Interface

---

嗨 @Ismail Interface，你找到答案了吗？ - madeinQuant

访问此链接以获取您的解决方案：https://dev59.com/alUL5IYBdhLWcg3wopWy#56218422 - manish adhikari

Answer 1

可以使用TabBar组件的unselectedLabelColor:和indicatorColor:属性来实现同样的效果。

示例代码：

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            leading: Icon(Icons.person_outline),
            title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
            bottom: PreferredSize(
                child: TabBar(
                    isScrollable: true,
                    unselectedLabelColor: Colors.white.withOpacity(0.3),
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(
                        child: Text('Tab 1'),
                      ),
                      Tab(
                        child: Text('Investment'),
                      ),
                      Tab(
                        child: Text('Your Earning'),
                      ),
                      Tab(
                        child: Text('Current Balance'),
                      ),
                      Tab(
                        child: Text('Tab 5'),
                      ),
                      Tab(
                        child: Text('Tab 6'),
                      )
                    ]),
                preferredSize: Size.fromHeight(30.0)),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 16.0),
                child: Icon(Icons.add_alert),
              ),
            ],
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                child: Center(
                  child: Text('Tab 1'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 2'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 3'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 4'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 5'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 6'),
                ),
              ),
            ],
          )),
    );
  }

输出：

- anmol.majhail

---

选项卡可以滚动，但指示器没有聚焦在中心。 - madeinQuant

奇怪，这4个答案都不能将选定的选项卡居中... - Krahmal

Answer 2

在TabBar中加入isScrollable: true,，例如：

TabBar(
       isScrollable: true,
.
.
.

)

- Mouhcine MIMYA

Answer 3

截图：

---

代码：

TabBar(
  isScrollable: true, // Required
  unselectedLabelColor: Colors.white30, // Other tabs color
  labelPadding: EdgeInsets.symmetric(horizontal: 30), // Space between tabs
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Colors.white, width: 2), // Indicator height
    insets: EdgeInsets.symmetric(horizontal: 48), // Indicator width
  ),
  tabs: [
    Tab(text: 'Total Investment'),
    Tab(text: 'Your Earnings'),
    Tab(text: 'Current Balance'),
  ],
)

- CopsOnRoad

Answer 4

在TabBar中添加isScrollable: true对我很有帮助。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  _counter++;
 });
}

@override
Widget build(BuildContext context) {

 final _kTabPages = <Widget>[
   Center(child: Icon(Icons.cloud, size: 64.0, color: Colors.teal)),
   Center(child: Icon(Icons.alarm, size: 64.0, color: Colors.cyan)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
 ];
 final _kTabs = <Tab>[
   Tab(text: 'NK'),
   Tab(text:'ActiveTools'),
   Tab(text:'Coxmate'),
   Tab(text:'Concept2'),
   Tab(text:'Croker'),
   Tab(text:'Hudson'),
   Tab(text:'Swift'),
   Tab(text:'Rowshop'),
 ];
 return DefaultTabController(
   length: _kTabs.length,
   child: Scaffold(
     appBar: AppBar(
     leading:Image.asset("assets/Macarbi Logo.jpg"),//TODO image or icon here
     title: Text(widget.title),
     actions: <Widget>[
       IconButton(
         icon: Icon(Icons.search),
         onPressed: () {},//TODO  do something
       ),
       IconButton(
         icon: Icon(Icons.account_circle),
         onPressed: () {},//TODO do something
       ),
     ],
      bottom: TabBar(
        isScrollable: true,
         tabs: _kTabs,
       ),
   ),
     body: TabBarView(
       children: _kTabPages,
     ),
   ),
 );
}

- Grant Verheul