颤动：任何人都可以帮助制作自定义TabController吗？

1 回答

• 0

  AppBar 和TabBar小部件不允许设置渐变，只允许设置颜色 .

  为了实现您的需要，您可以创建一个自定义小部件 GradientAppBar 或 GradientTabBar 构建一个 Stack ，它将 Container 与渐变和 AppBar 或 TabBar 集成在一起 .

  您创建带有参数的 GradientAppBar 将转到 Container 和 AppBar 本身 .

  这是Gradient AppBar的一个工作示例 . 以下是TabBar的类似示例 .

  import 'package:flutter/material.dart';
  
  void main() => runApp(new MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Policy(),
      );
    }
  }
  
  class Policy extends StatefulWidget {
    @override
    _PolicyState createState() => _PolicyState();
  }
  
  class _PolicyState extends State<Policy> {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: GradientAppBar(
              colors: [Colors.white, Colors.black],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              elevation: 4.0,
              bottom: TabBar(
                indicatorColor: Colors.white,
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              title: Center(child: Text('POLICY')),
            ),
            body: TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  class GradientAppBar extends StatefulWidget implements PreferredSizeWidget {
    // Gradiente properties
    final AlignmentGeometry begin;
    final AlignmentGeometry end;
    final List<Color> colors;
  
    // Material property
    final double elevation;
  
    // AppBar properties - Add all you need to change
    final Widget title;
    final PreferredSizeWidget bottom;
  
    @override
    final Size preferredSize;
  
    GradientAppBar({
      Key key,
      @required this.colors,
      this.begin = Alignment.centerLeft,
      this.end = Alignment.centerRight,
      this.elevation,
      this.title,
      this.bottom,
    })  : preferredSize = new Size.fromHeight(
              kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
          super(key: key); //appBar.preferredSize;
  
    @override
    _GradientAppBarState createState() => _GradientAppBarState();
  }
  
  class _GradientAppBarState extends State<GradientAppBar> {
    @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Material(
            elevation: widget.elevation,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                begin: widget.begin,
                end: widget.end,
                colors: widget.colors,
              )),
            ),
          ),
          AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            bottom: widget.bottom,
            title: widget.title,
          ),
        ],
      );
    }
  }
  

  这里是渐变TabBar的示例 .

  import 'package:flutter/material.dart';
  
  void main() => runApp(new MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Policy(),
      );
    }
  }
  
  class Policy extends StatefulWidget {
    @override
    _PolicyState createState() => _PolicyState();
  }
  
  class _PolicyState extends State<Policy> {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              bottom: GradientTabBar(
                colors: [Theme.of(context).primaryColor, Colors.green],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                tabBar: TabBar(
                  //indicatorColor: Colors.white,
                  tabs: [
                    Tab(icon: Icon(Icons.directions_car)),
                    Tab(icon: Icon(Icons.directions_transit)),
                    Tab(icon: Icon(Icons.directions_bike)),
                  ],
                ),
              ),
              title: Center(child: Text('POLICY')),
            ),
            body: TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  class GradientTabBar extends StatefulWidget implements PreferredSizeWidget {
    // Gradiente properties
    final AlignmentGeometry begin;
    final AlignmentGeometry end;
    final List<Color> colors;
  
    final TabBar tabBar;
  
    GradientTabBar({
      Key key,
      @required this.colors,
      this.begin = Alignment.centerLeft,
      this.end = Alignment.centerRight,
      this.tabBar,
    }) : super(key: key);
  
    @override
    Size get preferredSize => tabBar.preferredSize;
  
    @override
    _GradientTabBarState createState() => _GradientTabBarState();
  }
  
  class _GradientTabBarState extends State<GradientTabBar> {
    @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Container(
            height: widget.preferredSize.height,
            decoration: BoxDecoration(
                gradient: LinearGradient(
              begin: widget.begin,
              end: widget.end,
              colors: widget.colors,
            )),
          ),
          widget.tabBar,
        ],
      );
    }
  }
  

  回复于 2024-04-29T18:20:53+08:00