tdesign-flutter/tdesign-component/example/lib/page/td_radius_page.dart at develop · runoob-coder/tdesign-flutter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../annotation/demo.dart';
import '../../base/example_widget.dart';

/// 圆角示例页面
class TDRadiusPage extends StatelessWidget {
  const TDRadiusPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ExamplePage(
        title: tdTitle(context),
        exampleCodeGroup: 'radius',
        children: [
          ExampleModule(title: '数值型', children: [
            ExampleItem(desc: '3px 极小组件圆角', builder: _buildRadiusSmall),
            ExampleItem(desc: '6px 组件圆角', builder: _buildRadiusDefault),
            ExampleItem(desc: '9px 卡片圆角', builder: _buildRadiusLarge),
            ExampleItem(desc: '12px 面板圆角', builder: _buildRadiusExtraLarge),
          ]),
          ExampleModule(title: '特殊', children: [
            ExampleItem(desc: '胶囊型', builder: _buildRadiusRound),
            ExampleItem(desc: '圆型', builder: _buildRadiusCircle),
          ]),
        ]);
  }

  @Demo(group: 'radius')
  Widget _buildRadiusSmall(BuildContext context) {
    return Container(
      width: 100,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius: BorderRadius.circular(TDTheme.of(context).radiusSmall),
      ),
    );
  }

  @Demo(group: 'radius')
  Widget _buildRadiusDefault(BuildContext context) {
    return Container(
      width: 100,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius: BorderRadius.circular(TDTheme.of(context).radiusDefault),
      ),
    );
  }

  @Demo(group: 'radius')
  Widget _buildRadiusLarge(BuildContext context) {
    return Container(
      width: 100,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius: BorderRadius.circular(TDTheme.of(context).radiusLarge),
      ),
    );
  }

  @Demo(group: 'radius')
  Widget _buildRadiusExtraLarge(BuildContext context) {
    return Container(
      width: 100,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius:
            BorderRadius.circular(TDTheme.of(context).radiusExtraLarge),
      ),
    );
  }

  @Demo(group: 'radius')
  Widget _buildRadiusRound(BuildContext context) {
    // 胶囊型，数值设置较大
    return Container(
      width: 100,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius: BorderRadius.circular(TDTheme.of(context).radiusRound),
      ),
    );
  }

  @Demo(group: 'radius')
  Widget _buildRadiusCircle(BuildContext context) {
    //  圆形与胶囊型一致，如果长宽一致即是圆形
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: TDTheme.of(context).brandNormalColor,
        borderRadius: BorderRadius.circular(TDTheme.of(context).radiusCircle),
      ),
    );
  }
}