flutter基础布局代码

import 'package:flutter/material.dart';
import './tomFont.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar:AppBar(title: Text("个人中心")),
        // body: Column(
        //   children: [
        //     // MyApp(),
        //     // MyBtn(),
        //     //===2==
        //     // MyImage(),
        //     // SizedBox(height: 10,),
        //     // MyImageCir(),
        //     // SizedBox(height: 10,),
        //     // ClipImage(),
        //     //=====end2

        //   ], 
        // ),
        body: DataGridList(),
      )
    )
  );
}

class MyApp extends StatelessWidget{
   MyApp({Key? key}):super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Center(child: Container(
      width: 200,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text("Holo dart",style: TextStyle(
        color: Colors.white),),
      ),
      
    );
  }
}

class MyBtn extends StatelessWidget {
  const MyBtn({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 40,
      width: 200,
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.blue, 
        borderRadius: BorderRadius.circular(15),
      ),
      child: Text("按钮",style: TextStyle(
        color: Colors.white,
        fontSize: 20,
        ),),
      );
  }
}

class MyImage extends StatelessWidget {
  const MyImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
        height: 200,
        width: 200,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Image.network(
          "https://images.wallpaperscraft.com/image/single/tower_wall_building_476379_240x320.jpg",
          //scale: 2, 缩放
          //alignment: Alignment.centerLeft,
          //fit:BoxFit.fill,
          fit: BoxFit.cover,
          ),
      ),
    );
  }
}

class MyImageCir extends StatelessWidget {
  const MyImageCir({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(100),
        image: DecorationImage(
          image: NetworkImage("https://images.wallpaperscraft.com/image/single/puppy_labrador_retriever_look_95296_240x320.jpg"),
          fit:BoxFit.cover,
        )

      ),
    );
  }
}

class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network("https://images.wallpaperscraft.com/image/single/cat_cosmonaut_space_suit_130111_240x320.jpg",
        width: 150,
        height: 150,
        fit: BoxFit.cover,  
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 20,),
        Icon(Icons.home,size: 35,color: Colors.red,),
        Icon(Icons.email,size: 35,color: Colors.purple),
        SizedBox(height: 10,),
        Icon(TomIcon.weixin,size: 40,color: Colors.orange,),
        SizedBox(height: 10,),
        Icon(TomIcon.book,size: 40,color: Colors.green,),
      ],
    );
  }
}


class MyListPage extends StatelessWidget {
  const MyListPage({super.key});
  // 购物车
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,size: 25,),
          title: Text("首页"),),
        Divider(),
        ListTile(
          leading: Icon(Icons.assessment,size: 25,color:Colors.red,),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.payment,size: 25,color: Colors.green,),
          title:Text("未付款"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.local_car_wash,size: 25,color: Colors.orange,),
          title:Text("待收货"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite,size: 25,color: Colors.lightGreen,),
          title:Text("我的收藏")
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.people,size: 25,color:Colors.black54,),
          title:Text("在线客服"),
          trailing: Icon(Icons.chevron_right_sharp),
        )
      ],
    );
  }
}



class NewList extends StatelessWidget {
  const NewList({super.key});
// news list view
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.fromLTRB(5, 10, 5, 20),
      children: <Widget>[
        ListTile(
          leading: Image.network("https://gimg3.baidu.com/rel/src=https%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3435646008%2C2854176988%26fm%3D3028%26app%3D3028%26f%3DPNG%26fmt%3Dauto%26q%3D75%26size%3Df1138_640&refer=http%3A%2F%2Fwww.baidu.com&app=2010&size=w560&n=0&g=0n&q=100&fmt=auto?sec=1670605200&t=05e7c2d1e04c689972a0f2cc32166ff0"),
          title:Text("媒体：一两月内或现大规模疫情冲击"),
          subtitle: Text("12月7日，有专家表示，随着防控措施的放宽，未来一到两个月。"),
        ),
        Divider(),
        ListTile(
          leading: Image.network("https://img.nba.cn/image/nms/cms/c8d99b79-52f5-417d-9cc4-a10c7ad7bbe5/%E5%B0%81%E9%9D%A2.jpg?auth_key=1670513400-1670513400-0-414301d9c86ff7ffcfaeeeee831085c0&cdn_provider=110&ver=0.1.6"),
          title: Text("逐渐步入正规的湖人应该怎么补强？"),
          subtitle: Text("随着湖人打出了一波8胜2负的战绩，他们对本赛季阵容的探索似乎也逐渐步入了正轨。特别需要注意的是他们在客场战胜雄鹿的那场比赛。"),
        )
      ],
    );
  }
}

class HorListView extends StatelessWidget {
  const HorListView({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 120,
      child: ListView(
        children: <Widget>[
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.red,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.green,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.yellow,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.greenAccent,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
            ),
            Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.deepOrange,
                ),
            ),
        ],
        scrollDirection: Axis.horizontal,
    ),
    );
  }
}

class ListByFun extends StatelessWidget {
  const ListByFun({super.key});

  List<Widget> _initListData(){
    List<Widget> list=[];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第${i+1}个列表"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initListData(),
    );
  }
}


class MyGrid extends StatelessWidget {
  const MyGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 100,
      children: [
          Icon(Icons.bike_scooter),
          Icon(Icons.bike_scooter),
          Icon(Icons.bike_scooter),
          Icon(Icons.bike_scooter),
          Icon(Icons.bike_scooter),
          Icon(Icons.bike_scooter),

      ],
    );
  }
}


class DataGridList extends StatelessWidget {
  const DataGridList({super.key});

  List<Widget> _initFridViewData(){
    List<Widget> templist=[];
    for (var i = 0; i < 12; i++) {
      templist.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color:Colors.pink
          ),
          child: Text("No.${i} data"),
        )
      );
    }
    return templist;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(18),
      crossAxisSpacing: 8,
      mainAxisSpacing: 8,
      crossAxisCount: 2,  //count
      //maxCrossAxisExtent: 120, //extend 快速创建横轴子元素固定最大长度的gridview
      childAspectRatio: 1.5, //宽高比
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black26
            )
          ),
          child: Column(children: [

            Image.network(
              "https://img.nba.cn/image/nms/cms/f9fcdcc7-417f-49eb-9055-be3cd56418e0/GettyImages-1245494947.jpeg?auth_key=1670674500-1670674500-0-192116258dd7519061bda151807da9c1&cdn_provider=110&ver=0.1.6",
              fit: BoxFit.cover,
              ),
              SizedBox(height: 8,),
              Text("湖人122-133费城"),
            Image.network(
              "https://img.nba.cn/image/nms/cms/f9fcdcc7-417f-49eb-9055-be3cd56418e0/GettyImages-1245494947.jpeg?auth_key=1670674500-1670674500-0-192116258dd7519061bda151807da9c1&cdn_provider=110&ver=0.1.6",
              fit: BoxFit.cover,
              ),
              SizedBox(height: 10,),
              Text("湖人122-133费城"),   
          ],),
          
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

void main(){
  runApp(const TomApp());
}

class TomApp extends StatelessWidget {
  const TomApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter App"),),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.black,
        ),Row(
          children: [
            Expanded(
              flex: 2,
              child: 
              Image.network(
                "https://img.nba.cn/image/nms/cms/0b911e82-b2eb-4e95-8de0-90718c5d5fa7/GettyImages-1448055548.jpg?auth_key=1670688000-1670688000-0-5b82f07b817acc3191ac75d632d152be&cdn_provider=110&ver=0.1.6",
                fit: BoxFit.cover,),
                ),
            // Expanded(flex:1,child: Column(
            //   children: [
            //     Expanded(flex:1,child: Image.network("https://img.nba.cn/image/nms/cms/e047c2b7-40ca-4ddb-899d-fb225ab0eea2/GettyImages-1448054855.jpg?auth_key=1670688000-1670688000-0-34d3946892969d5489c8a2087dcb5037&cdn_provider=110&ver=0.1.6",fit: BoxFit.cover,)),
            //     Expanded(flex:1,child: Image.network("https://img.nba.cn/image/nms/cms/21a1adf4-bd66-4abb-9183-f0f23605c420/GettyImages-1448055889.jpg?auth_key=1670688000-1670688000-0-6f1bd7ff505dc69013663f1ded2fd7ee&cdn_provider=110&ver=0.1.6",fit: BoxFit.cover,)),
            //   ],
            // ),),
            Expanded(flex: 1,child: SizedBox(
              height: 180,
              child: Column(
              children: [
                Expanded(flex:1,child: Image.network("https://img.nba.cn/image/nms/cms/e047c2b7-40ca-4ddb-899d-fb225ab0eea2/GettyImages-1448054855.jpg?auth_key=1670688000-1670688000-0-34d3946892969d5489c8a2087dcb5037&cdn_provider=110&ver=0.1.6",fit: BoxFit.cover,)),
                Expanded(flex:1,child: Image.network("https://img.nba.cn/image/nms/cms/21a1adf4-bd66-4abb-9183-f0f23605c420/GettyImages-1448055889.jpg?auth_key=1670688000-1670688000-0-6f1bd7ff505dc69013663f1ded2fd7ee&cdn_provider=110&ver=0.1.6",fit: BoxFit.cover,)),
              ],
            ),
            ),)
          ],
        )
      ],
    );

  }
}

class IconContainer extends StatelessWidget {

  Color color;
  IconData icon;


  IconContainer(this.icon,{super.key,required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: this.color,
      height: 100,
      width: 100,
      child: Icon(this.icon,color: Colors.white,size: 28,),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times for Tom:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}