如何为Cardview颤动设置背景颜色

时间:2020-08-18 17:41:46

标签: flutter

我尝试进入登录页面,并将所有文本提交到cardview中。至此,我没有任何问题,但是现在我尝试为cardview做背景。喜欢这张图片:

enter image description here

正如您在这张图片中看到的那样,我想在代码中添加背景蓝色。如果有人知道解决方案可以帮助我,对不起。可能是重复的问题,但是尽管时间长了,我还是无法解决。

@override
  Widget build(BuildContext context) {

    return Scaffold(
        body: SingleChildScrollView(
            padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
        child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(2.0),
            ),
            elevation: 2,
           // margin: EdgeInsets.all(19),
            child: Center(
              child: Column(
                children: <Widget>[
                  Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Text('User Login Form',
                          style: TextStyle(fontSize: 21))),
                  Divider(),

               Container(
                 margin: EdgeInsets.all(20),
                   child: TextField(
                controller: emailController,
                onChanged: (value) {
                  _myPreferences.user = value;
                  _myPreferences.commit();
                },
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'User Name',
                ),
              )
            ),
                  Container(
                      margin: EdgeInsets.all(20),
                      child: TextField(
                        controller: passwordController,
                        onChanged: (value) {
                          _myPreferences.password = value;
                          _myPreferences.commit();
                        },
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'User password',
                        ),
                      )
                  ),

                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Padding(
                          padding: const EdgeInsets.all(2.0),),
                     // Divider(),

                      RaisedButton(
                        onPressed: userLogin,
                        color: Colors.amberAccent,
                        textColor: Colors.white,
                        padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
                        child: Text('Click Here To Login'),

                      ),
                      Padding(
                        padding: const EdgeInsets.all(5.0),),
                    //  Divider(),
                      FlatButton(
                        textColor: Colors.black,
                        padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
                        onPressed: () {
                          Navigator.push(context, MaterialPageRoute(builder: (context) => RegisterUser()
                          ),);
                        },
                        child: Text("New User click here",
                        ),
                      ),


                    ],
                  ),
                  Visibility(
                      visible: visible,
                      child: Container(
                          margin: EdgeInsets.only(bottom: 30),
                          child: CircularProgressIndicator()
                      )
                  ),
                ],
              ),
            )
    )
        )
    );
  }

3 个答案:

答案 0 :(得分:1)

您可以尝试...

          Card(
             color: Colors.blue,
             shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(2.0),
            ),

但是,如果要更改整个背景,则可以使用Center包裹主体,并以相同的方式赋予颜色。

答案 1 :(得分:0)

您可以尝试一下,只需复制并粘贴以下代码:

set(CMAKE_BUILD_TYPE Release)
SET(CMAKE_SYSTEM_NAME Linux)
SET(CMAKE_SYSTEM_VERSION 1)


SET(CMAKE_C_COMPILER $ENV{HOME}/raspi/tools/arm-bcm2708/gcc-linaro-arm-linux-gnueabihf-raspbian-x64/bin/arm-linux-gnueabihf-gcc)
SET(CMAKE_CXX_COMPILER $ENV{HOME}/raspi/tools/arm-bcm2708/gcc-linaro-arm-linux-gnueabihf-raspbian-x64/bin/arm-linux-gnueabihf-g++)

# Where is the target environment
SET(CMAKE_FIND_ROOT_PATH $ENV{HOME}/raspi/sysroot)
SET(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} --sysroot=${CMAKE_FIND_ROOT_PATH}")
SET(CMAKE_SHARED_LINKER_FLAGS "${CMAKE_SHARED_LINKER_FLAGS} --sysroot=${CMAKE_FIND_ROOT_PATH}")
SET(CMAKE_MODULE_LINKER_FLAGS "${CMAKE_MODULE_LINKER_FLAGS} --sysroot=${CMAKE_FIND_ROOT_PATH}")

# Search for programs only in the build host directories
SET(CMAKE_FIND_ROOT_PATH_MODE_PROGRAM NEVER)

# Search for libraries and headers only in the target directories
SET(CMAKE_FIND_ROOT_PATH_MODE_LIBRARY ONLY)
SET(CMAKE_FIND_ROOT_PATH_MODE_INCLUDE ONLY)


set(CMAKE_CXX_STANDARD 14)
set(CMAKE_CXX_FLAGS_RELEASE "-O3 -Wall -fopenmp")

set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -fopenmp")

find_package( OpenCV REQUIRED )

find_library(LIB_RT rt)

list(APPEND LINK_LIBS 
  ${OpenCV_LIBS}
)


include_directories(
  ${OpenCV_INCLUDE_DIRS}
)


set(SOURCE opencvdemo.cpp)

add_executable(vc_opencv_demo ${SOURCE})
target_link_libraries(vc_opencv_demo ${LIB_RT} ${LINK_LIBS})

答案 2 :(得分:0)

假设CardView是指Card Widget。

卡片具有名为color的属性,可用于设置其背景颜色。

Card(
    color: Colors.blue,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(2.0),
    ),
    elevation: 2,
    child: ...
);

如果您希望背景作为图像,则颜色不在Card中,而应在Scaffold中。因此,您可以添加一个Stack作为主窗口小部件,然后添加一个包含2个块的列(一个为蓝色)和另一个未着色的列,然后添加您的卡。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Flexible(
                flex: 1,
                child: Container(color: Colors.blue),
              ),
              Flexible(
                flex: 2,
                child: Container(),
              )
            ],
          ),
          SingleChildScrollView(
            padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
              ),
              elevation: 2,
              // margin: EdgeInsets.all(19),
              child:...
          ),
      ],
    );
}