小编San*_*esh的帖子

我试图实现以下布局

我尝试使用Row(Modifier.weight(50f))编译器开始抛出的错误

如果进口自ColumnInstance-import androidx.compose.foundation.layout.ColumnScopeInstance.weight

Cannot access 'ColumnScopeInstance': it is internal in 'androidx.compose.foundation.layout'

如果进口自RowInstance-androidx.compose.foundation.layout.RowScopeInstance.weight

Cannot access 'RowScopeInstance': it is internal in 'androidx.compose.foundation.layout'

下面附上我的可组合代码

@Composable
fun BoxLayout(){
    Row(Modifier.weight(50f)) {
        BoxWithText()
        BoxWithText()
    }
}

附上整个文件以供参考

package me.sanjaykapilesh.layoutmastery

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScopeInstance.weight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import me.sanjaykapilesh.layoutmastery.ui.theme.LayoutMasteryTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) { …

我正在尝试将图像的路径作为道具传递给组件

注意：组件和索引页都可以通过相同的路径访问图像。当我将路径作为道具传递时它不起作用

在下面的代码中，我尝试使用 GatbsyImage 和 StaticImage 标签似乎都失败了

索引.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"

function Home(){
  // Home page images
  return (
    <Main >
    <section className="home_page">
      <ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
    </section>
    </Main>
  )
}

export default Home
 

组件/ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <GatsbyImage image={path}></GatsbyImage>
          <StaticImage src={path}></StaticImage>
      </div> 
  
    )
}
export default …