What's the different between aspectRatio(1f) and fillMaxSize() for JetpackCompose Modifier attribute

Question

When I set the modifier as below

class MainActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Clock(modifier = Modifier
                .aspectRatio(1f)
                .fillMaxSize()
                .padding(16.dp))
        }
    }
}

I have both fillMaxSize() and aspectRaio(1f) as per I see other people code and have both set. Are they doing the same thing? Or they are needed for different purposes? (I tried removing one of each, and seems to result the same).

P/S: I tried to view the code to understand the different but can't as per How to see JetpackCompose kotlin source in Android Studio (4.2)?

Answer 1

Looks like aspectRatio(1f) will make it square, while fillMaxSize() will make it take up the entire screen.

An example below of either

        setContent {
            Clock(modifier = Modifier
                .fillMaxSize()
                .aspectRatio(1.0f)
                .padding(64.dp))
        }

or

        setContent {
            Clock(modifier = Modifier
                .fillMaxSize()
                .padding(64.dp))
        }

where the fillMaxSize() takes precedence, the drawRect will be as below

But when we have aspectRation(1.0f), with an example either of the below,

        setContent {
            Clock(modifier = Modifier
                .aspectRatio(1.0f)
                .fillMaxSize()
                .padding(64.dp))
        }

or

        setContent {
            Clock(modifier = Modifier
                .aspectRatio(1.0f)
                .padding(64.dp))
        }

it shall be