Flutter布局2：Card 按钮

1.ListView-Card

 return ListView(
         children: [
          Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            elevation: 20,
            margin: const EdgeInsets.all(10),
           child: Column(children: [
            AspectRatio(aspectRatio: 16/9,child: Image.network("https://pic1.zhimg.com/v2-b4b7563a13a67f8d78d601d5cda92e7c_r.jpg?source=1940ef5c",fit:BoxFit.cover),
                        ),
          ListTile(
            leading: ClipOval(
              child: Image.network("https://www.cbo.cn/data/attachment/image/20200811/20200811100704_46915.jpg",
                                  fit:BoxFit.cover,height: 40,width: 40,),
            ),
              title: const Text("东方2"),
              subtitle: const Text("大雨声100余"),
            ),
           ]),
          ),
  


         ],

     );

2.圆形图片的方法2

 leading: CircleAvatar(
              backgroundImage: NetworkImage("https://pic1.zhimg.com/v2-b4b7563a13a67f8d78d601d5cda92e7c_r.jpg?source=1940ef5c",),
            ),

按钮

按钮没有宽度，高度，只会充满整个容器

sizebox没有padding.container才有

void main() {

  runApp(const MyApp());

}

//单独抽成组件需要使用stateless,快捷直接输入

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return  MaterialApp(

      theme: ThemeData(

        primarySwatch: Colors.yellow,

      ),

      home:Scaffold(

        appBar: AppBar(title: const Text("www.i7i8i9.com"),),

       body: const MyHomePage(),

       // body: MyHomePage(),

     

      ),

    );

  }

}

class MyHomePage extends StatelessWidget {

  const MyHomePage({super.key});

   //MyHomePage({super.key});

  @override

  Widget build(BuildContext context) {

    //final size=MediaQuery.of(context).size;//不能用infinite,获取设备宽度和高度

     return ListView(

      children: [

        Row(

          mainAxisAlignment: MainAxisAlignment.spaceAround,

         children: [

        ElevatedButton(onPressed: (){print("普通按钮");}, child: const Text("普通按钮")) ,

        TextButton(onPressed: (){print("文本按钮");}, child: const Text("文本按钮")),

        const OutlinedButton(onPressed: null, child: Text("边框按钮")),  

        IconButton(onPressed: (){}, icon:const Icon(Icons.thumb_down_off_alt)),

         ],

        ),

        const SizedBox(height: 20,),

        Row(

          children: [

            ElevatedButton.icon(onPressed: (){}, icon:const Icon(Icons.send),label:const Text("发送")),

            TextButton.icon(onPressed: (){}, icon: const Icon(Icons.account_circle_sharp), label:const Text("hello")),

            OutlinedButton.icon(onPressed: (){}, icon: const Icon(Icons.message), label: const Text("新闻")),

          ],

 

        ),

        const SizedBox(height: 20,),

        Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              style: ButtonStyle(

                backgroundColor:MaterialStateProperty.all(Colors.red),//背景颜色

                foregroundColor: MaterialStateProperty.all(Colors.blue),//文字图标颜色

              ),

              onPressed: (){}, child: const Text("nanjing")),

         

 

        ],

        ),

        const SizedBox(height: 20,),

        Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

                  Container(//for set button size

                  width: 300,

                  height: 200,

                  child: ElevatedButton(onPressed: (){}, child:const  Text("大按钮")),

                  ),

                  SizedBox(

                  width: 300,

                  height: 200,

                  child: ElevatedButton.icon(onPressed: (){}, icon:const Icon(Icons.search), label: const Text("hello")),

                  ),

          ],

        ),

        const SizedBox(

                    height: 20,),

        Row(children: [

                     Expanded(

                      flex: 1,

                      child: Container(

                        margin:const EdgeInsets.all(20),

                        height: 40,

                        child: ElevatedButton(

                           onPressed: (){},

                           style:  ButtonStyle(

                                  backgroundColor:MaterialStateProperty.all(Colors.red)),

                               //   foregroundColor:MaterialStateProperty.all(Colors.pink),

                            child: const Text("登录")),

                      ),

                     ),

                  ],

                  ),

            const SizedBox(height: 20,),

         Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

              ElevatedButton(

                style: ButtonStyle(

                  shape: MaterialStateProperty.all(

                    RoundedRectangleBorder(

                      borderRadius:BorderRadius.circular(20),

                    )

                  )

                ),

                onPressed: (){}, child: const Text("圆角")),

                SizedBox(

                  width: 80,

                  height: 80,

                  child:  ElevatedButton(

                style: ButtonStyle(

                  shape: MaterialStateProperty.all(

                 const  CircleBorder(side: BorderSide(width:15,color: Colors.blue))

                    )

                  ),

                  onPressed: (){}, child: const Text("圆形"),

                  ),

 

                ),

   

             

           

         ],

         ),

           const SizedBox(height: 20,),

           Row(

            mainAxisAlignment: MainAxisAlignment.center,

             children: [

               OutlinedButton(

                style: ButtonStyle(

            // backgroundColor:MaterialStateProperty.all(Color(Colors.red))

                side:MaterialStateProperty.all(

                 const  BorderSide(width: 1,color: Colors.red),

                )

             

             ),

                onPressed: (){}, child: const Text("边框按钮")),

             ],

           )

          ],

        );

   

  }

}