current position:Home>[flutter component collection] divider | August update challenge

[flutter component collection] divider | August update challenge

2022-01-27 04:18:07 Zhang Feng Jie te lie

Preface :

This is my participation 8 The fourth of the yuegengwen challenge 18 God , Check out the activity details :8 Yuegengwen challenge . For the Nuggets August is more challenging , I'm going to choose... This month 31 A component that has not been described before , Conduct a comprehensive analysis and attribute Introduction . These articles will serve as Flutter Component collection Important material for . I hope we can keep going , Your support will be my greatest motivation ~

This series Component article list
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility 14. Padding 15. AnimatedContainer
16.CircleAvatar 17.PhysicalShape 18.Divider [ this paper ]

One 、 know Divider Components

Divider Components are familiar to everyone , It's a horizontal dividing line , You can specify the height 、 thickness 、 Color 、 Margin . What are these attributes by default , How to uniformly set default values ,Divider How is the source code of the component implemented ? This article will introduce in detail .


1. Divider essential information

Here is Divider Component class Definition and Construction method , You can see that it is inherited from StatelessWidget. There are five optional parameters :

image-20210818081625700


2.Divider Dimensional analysis of

Have a look first Divider Size characteristics of : Let's go through [w(10,200) - h(0,200)] Constraints .Divider Can pass height Specifies the height of its size area , The width is the maximum value of the parent constraint . notes : [w(a,b) - h(c,d)] Express , The dimension constraint is wide in a and b Between , High in c and d Between .

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 0
      ),
      child: Divider(
        height: 10,
      ),
    );
  }
}
 Copy code 

When the constraint is changed to [w(10,200) - h(50,200)] , It can be seen that Divider The specified height will be invalid . in other words Divider The specified height does not necessarily take effect , It will be controlled by the parent region constraints .

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 50
      ),
      child: Divider(
        height: 10,
      ),
    );
  }
}
 Copy code 

If you pass UnconstrainedBox Contact parent constraints , that Divider There is no limit to the width of the component , Will not show . This also shows that the parent's region constraint pair Divider Components are important .

Through the rendering tree, you can see ,Divider The final size of the rendered object corresponding to the component is Size(0,0) , This explains why, without constraints ,Divider The component does not display .

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 50
      ),
      child: UnconstrainedBox(
        child: Divider(
            height: 10,
        ),
      ),
    );
  }
}
 Copy code 

3.Divider Properties of

The meaning of these attributes is very simple , The following code is three split lines .

Property name type The default value is purpose
height double null Component height
thickness double null The thread is thick and thin
indent double null The left margin
endIndent double null The right margin
color Color null Line color

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
      width: 200,
      child: Wrap(
          children:[
            const Divider(
              height: 10,
              indent: 20,
              endIndent: 20,
              thickness: 1,
              color: Colors.orange,
            ),
            const Divider(
              height: 10,
              indent: 10,
              endIndent: 10,
              thickness: 2,
              color: Colors.blueAccent,
            ),
            const Divider(
              height: 10,
            ),
          ],
      ),
    );
  }
}
 Copy code 

among indent and endIndent Can be used for margins like this , You don't need a coat Padding Realized .


4.Divider Default properties of

If an application needs to specify the default Divider style , It's obviously troublesome to set it every time you use it .Flutter There are related theme components in DividerTheme , It maintains DividerThemeData data . We can go through This component makes its child nodes Divider Display in the default style . The effect is as follows :

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  DividerTheme(
      data: DividerThemeData(
        color: Colors.orange,
        thickness: 1/window.devicePixelRatio,
        space: 5
      ),
      child: Container(
        width: 200,
        child: Wrap(
            children:[
              const Divider(),
              const Divider(),
              const Divider(),
            ],
        ),
      ),
    );
  }
}
 Copy code 

Two 、 Divider Source code implementation

First , It is StatelessWidget, Can only rely on other components to build , The core logic is build In the method .

Another thing to note , In the assertion of the constructor , All four numeric attributes It can't be negative .


build The method is also simple , First, through DividerTheme get data , It can be seen that if the subject is not set , The default height is 16 Logical pixels . That is to say, at this time Divider It has a certain height of space occupation . The area size passes through SizedBox Set up , The dividing line is through Container The bottom edge of the decoration is finished . among indent and endIndent Act on margin attribute , The essence is still through Padding The margin that the component completes .

Through debugging, you can see the default DividerTheme The data attribute in is null , That's the question Divider What is the default color for ?

stay createBorderSide In the static method , It can be seen that , If DividerTheme The color is null , Will be based on Theme Medium dividerColor Set the color .

that Divider This is the end of the introduction , So this article ends here , Thank you for watching , See you tomorrow ~

copyright notice
author[Zhang Feng Jie te lie],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270418047722.html

Random recommended