Flutter中的“Segments”

Question

我正在开发一个Flutter应用程序，尝试为我的应用程序添加一个段落。在Flutter中是否可以实现它？因此，我想要两个不同的小部件来控制这两个按钮。这类似于Flutter中的TabBar或本地应用程序中的Segment。

- Praveen Kumar

---

当然可以，你尝试过什么了吗？ - Hemanth Raj

@HemanthRaj 我尝试使用TabBar但没有成功。 - Praveen Kumar

你是否需要一些视觉参考，例如参考图片？所提供的图片仅显示两个按钮。这可以通过行控件实现。 - Hemanth Raj

@HemanthRaj 我已经在我的问题中更新了图片。因此，我想要为这两个按钮创建2个不同的小部件。这类似于Flutter中的TabBar或本地应用程序中的Segment。 - Praveen Kumar

@HemanthRaj 如果我们手动在选项卡之间滑动，扁平按钮的索引不会改变。是否有可能限制滑动或在用户在选项卡之间滑动时更新按钮索引？ - Praveen Kumar

Answer 1

CupertinoSegmentedControl是你的好朋友

示例（在StatefulWidget内部）:

  int segmentedControlValue = 0;

  Widget _segmentedControl() => Container(
    width: 500,
    child: CupertinoSegmentedControl<int>(
      selectedColor: Colors.blue,
      borderColor: Colors.white,
      children: {
        0: Text('All'),
        1: Text('Recommendations'),
      },
      onValueChanged: (int val) {
        setState(() {
          segmentedControlValue = val;
        });
      },
      groupValue: segmentedControlValue,
    ),
  );

- Andrew

Answer 2

如您所尝试的那样，您可以很容易地通过使用TabBarView来实现它。以下代码显示了一个非常基本的实现方式。

示例：

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => new _ExampleState();
}

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  // TabController to control and switch tabs
  TabController _tabController;

  // Current Index of tab
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController =
        new TabController(vsync: this, length: 2, initialIndex: _currentIndex);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Example"),
      ),
      body: new Column(
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            child: new Container(
              decoration:
                  new BoxDecoration(border: new Border.all(color: Colors.blue)),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  // Sign In Button
                  new FlatButton(
                    color: _currentIndex == 0 ? Colors.blue : Colors.white,
                    onPressed: () {
                      _tabController.animateTo(0);
                      setState(() {
                        _currentIndex = 0;
                      });
                    },
                    child: new Text("SignIn"),
                  ),
                  // Sign Up Button
                  new FlatButton(
                    color: _currentIndex == 1 ? Colors.blue : Colors.white,
                    onPressed: () {
                      _tabController.animateTo(1);
                      setState(() {
                        _currentIndex = 1;
                      });
                    },
                    child: new Text("SignUp"),
                  )
                ],
              ),
            ),
          ),
          new Expanded(
            child: new TabBarView(
                controller: _tabController,
                // Restrict scroll by user
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  // Sign In View
                  new Center(
                    child: new Text("SignIn"),
                  ),
                  // Sign Up View
                  new Center(
                    child: new Text("SignUp"),
                  )
                ]),
          )
        ],
      ),
    );
  }
}

希望这有所帮助！

- Hemanth Raj

---

如果我们手动在选项卡之间滑动，平面按钮索引不会更改。是否可以限制滑动或在用户在选项卡之间滑动时更新按钮索引？ - Praveen Kumar

是的，可以限制用户手动在视图之间滚动。您可以将new NeverScrollableScrollPhysics()传递给TabBarView的physics属性。我更新了我的答案以展示如何实现。 - Hemanth Raj

Answer 3

只需使用DefaultTabController

Scaffold(
      appBar: PreferredSize(
          preferredSize: const Size.fromHeight(kToolbarHeight),
          child: TabBar(
            isScrollable: false,
            indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color:
                    Theme.of(context).colorScheme.primary.withOpacity(0.3)),
            labelColor: Theme.of(context).colorScheme.primary,
            //Theme.of(context).brightness == Brightness.light ? Colors.black : Colors.white,
            unselectedLabelColor:
                Theme.of(context).brightness == Brightness.light
                    ? Colors.black54
                    : Colors.white60,
            tabs: _tabs,
          )),
      body: TabBarView(
        children: [

- smedasn